/* --- OPTLYX AI DEMO - ULTRA VISUAL UPGRADE --- */

:root {
    --neon-purple: #a855f7;
    --neon-blue: #3b82f6;
    --neon-green: #10b981;
    --glass-bg: rgba(10, 10, 12, 0.75);
    --glass-border: rgba(255, 255, 255, 0.1);
}

* {
    font-weight: 300 !important;
    box-sizing: border-box;
}

body {
    background-color: #020204;
    color: #e2e8f0;
    font-family: 'Inter Tight', sans-serif;
    overflow-x: hidden;
    margin: 0;
}

/* --- BACKGROUND ANIMATO --- */
.bg-animation-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    background: 
        radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.15), transparent 60%),
        radial-gradient(circle at 80% 50%, rgba(168, 85, 247, 0.1), transparent 50%);
}

/* Griglia Cyberpunk in movimento */
.cyber-grid {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(500px) rotateX(60deg);
    animation: gridMove 20s linear infinite;
    opacity: 0.6;
}

@keyframes gridMove {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(60px); }
}


/* --- HEADER --- */
.ai-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
    padding-top: 1rem;
    animation: slideDown 0.8s ease-out;
}

.header-logo {
    max-height: 40px;
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.6));
}

.status-pill {
    font-size: 0.7rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 0.4rem 1rem;
    border-radius: 30px;
    display: flex; align-items: center; gap: 8px;
    color: #34d399;
    letter-spacing: 1.5px;
    font-weight: 600 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

.blink-dot {
    width: 6px; height: 6px;
    background: #34d399; border-radius: 50%;
    box-shadow: 0 0 8px #34d399;
    animation: blink 1s infinite;
}

/* --- FASE 1: INPUT (UPLOAD) --- */
.phase-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1;
    transition: all 0.5s ease-in-out;
}
.phase-container.hidden {
    display: none;
    opacity: 0;
    transform: scale(0.95);
}
.phase-container.active {
    opacity: 1;
    transform: scale(1);
    animation: fadeScaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-text h1 {
    font-size: 4rem;
    text-align: center;
    
    /* 1. Spazio Forzato Sotto (Aumentato e con !important) */
    margin-bottom: 3rem !important; 
    padding-bottom: 0.5rem !important; /* Extra padding per sicurezza */
    
    /* 2. Font Sottile (Light) */
    font-weight: 600 !important; 
    letter-spacing: -1px;
    
    /* Gradiente Lento e Fluido */
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #a855f7 30%,    
        #3b82f6 50%,    
        #a855f7 70%,    
        #ffffff 100%
    );
    background-size: 200% auto;
    
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    /* Animazione molto lenta (12 secondi) */
    animation: textFlow 12s linear infinite;
    
    /* Glow leggero */
    filter: drop-shadow(0 0 25px rgba(168, 85, 247, 0.3));
}

/* Keyframes */
@keyframes textFlow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
.upload-zone {
    width: 100%; max-width: 800px; height: 450px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.upload-zone:hover {
    border-color: var(--neon-purple);
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.2), inset 0 0 30px rgba(168, 85, 247, 0.1);
    transform: translateY(-5px);
}

/* Floating 3D Icons */
.floating-docs-container {
    position: relative; width: 250px; height: 160px;
    perspective: 1000px;
    margin-bottom: 2rem;
}

.doc-icon {
    position: absolute;
    width: 80px; height: 110px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.doc-icon svg { stroke-width: 1.5; width: 32px; height: 32px; }

.doc-icon.center {
    left: 85px; top: 20px; z-index: 3;
    border-color: var(--neon-purple); color: var(--neon-purple);
    animation: floatCenter 6s ease-in-out infinite;
}
.doc-icon.left {
    left: 20px; top: 40px; z-index: 2;
    border-color: var(--neon-blue); color: var(--neon-blue);
    transform: rotateY(20deg) rotateZ(-10deg);
    animation: floatLeft 7s ease-in-out infinite;
}
.doc-icon.right {
    right: 20px; top: 40px; z-index: 2;
    border-color: var(--neon-green); color: var(--neon-green);
    transform: rotateY(-20deg) rotateZ(10deg);
    animation: floatRight 8s ease-in-out infinite;
}

/* --- FASE 2: PROCESSING (Il Cuore AI) --- */
.ai-core-container {
    display: flex; flex-direction: column; align-items: center; margin-bottom: 3rem;
}

.core-hud {
    position: relative;
    width: 160px; height: 160px;
    display: flex; align-items: center; justify-content: center;
}

.core-ring {
    position: absolute; border-radius: 50%; border: 1px solid transparent;
}
.r1 { width: 100%; height: 100%; border-top-color: var(--neon-purple); border-bottom-color: var(--neon-purple); animation: spin 4s linear infinite; }
.r2 { width: 80%; height: 80%; border-left-color: var(--neon-blue); border-right-color: var(--neon-blue); animation: spin 3s linear infinite reverse; }
.r3 { width: 60%; height: 60%; border: 2px dashed rgba(255,255,255,0.3); animation: spin 10s linear infinite; }

.core-brain {
    width: 40px; height: 40px;
    background: var(--neon-purple);
    border-radius: 50%;
    box-shadow: 0 0 30px var(--neon-purple);
    animation: pulseCore 1s ease-in-out infinite alternate;
}

.processing-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; width: 100%;
}

.doc-scan-visual {
    background: #0f1116;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    height: 400px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

/* Scanner Laser */
.laser-scan-line {
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--neon-blue);
    box-shadow: 0 0 20px var(--neon-blue), 0 0 10px #fff;
    z-index: 10;
    animation: scanMove 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.laser-trail {
    position: absolute; top: -50px; left: 0; right: 0; height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.2));
    pointer-events: none;
}

/* Terminale Hacker */
.terminal-window {
    background: rgba(10,10,12,0.9);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: #d1d5db;
    height: 400px;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.log-entry { margin-bottom: 8px; opacity: 0; animation: fadeIn 0.2s forwards; }
.log-time { color: #64748b; margin-right: 10px; }
.log-info { color: var(--neon-blue); }
.log-success { color: var(--neon-green); font-weight: 400 !important; }
.log-warn { color: #f59e0b; }
.typing-cursor::after { content: '▋'; animation: blink 1s infinite; color: var(--neon-purple); margin-left: 5px; }


.ledger-table { width: 100%; border-collapse: collapse; }
.ledger-header { background: rgba(255,255,255,0.03); color: #94a3b8; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; }
.ledger-header th { padding: 1rem 1.5rem; text-align: left; font-weight: 500 !important; }
.ledger-row { border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.2s; }
.ledger-row:hover { background: rgba(255,255,255,0.02); }
.ledger-row td { padding: 1rem 1.5rem; }

.amount-dare { color: #34d399; font-family: monospace; letter-spacing: -0.5px; }
.amount-avere { color: #f87171; font-family: monospace; letter-spacing: -0.5px; }

.reasoning-box {
    background: rgba(139, 92, 246, 0.05);
    border-left: 4px solid var(--neon-purple);
    padding: 1.5rem;
    border-radius: 0 12px 12px 0;
    margin-bottom: 2rem;
    animation: fadeIn 1s ease-out;
}
.reasoning-title { display: flex; align-items: center; gap: 10px; color: var(--neon-purple); margin-bottom: 0.5rem; font-weight: 600 !important; }

/* --- ANIMAZIONI --- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatCenter { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes floatLeft { 0%,100% { transform: rotateY(20deg) rotateZ(-10deg) translateY(0); } 50% { transform: rotateY(20deg) rotateZ(-10deg) translateY(-10px); } }
@keyframes floatRight { 0%,100% { transform: rotateY(-20deg) rotateZ(10deg) translateY(0); } 50% { transform: rotateY(-20deg) rotateZ(10deg) translateY(-10px); } }
@keyframes pulseCore { 0% { transform: scale(0.95); box-shadow: 0 0 20px var(--neon-purple); } 100% { transform: scale(1.1); box-shadow: 0 0 50px var(--neon-purple); } }
@keyframes scanMove { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeScaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes titleGlow { 0% { filter: drop-shadow(0 0 10px rgba(168,85,247,0.3)); } 100% { filter: drop-shadow(0 0 25px rgba(168,85,247,0.6)); } }

/* Utility Buttons */
.btn-glow {
    background: transparent; border: 1px solid var(--neon-purple); color: #fff;
    padding: 0.8rem 2.5rem; border-radius: 50px; cursor: pointer;
    transition: 0.3s; position: relative; overflow: hidden;
    font-weight: 600 !important; letter-spacing: 1px;
}
.btn-glow:hover {
    background: var(--neon-purple);
    box-shadow: 0 0 30px var(--neon-purple);
}

.demo-chip {
    padding: 0.5rem 1.2rem; background: rgba(255,255,255,0.05);
    border-radius: 20px; cursor: pointer; border: 1px solid transparent;
    transition: 0.3s; font-size: 0.85rem; color: #94a3b8;
}
.demo-chip:hover {
    border-color: var(--neon-blue); color: #fff;
    background: rgba(59, 130, 246, 0.15);
    transform: scale(1.05);
}
/* --- AGGIUNTE SVG E ANIMAZIONI WORLD-CLASS --- */

/* 1. Core HUD Advanced (Il cervello pulsante) */
.core-hud-advanced {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* L'anello SVG rotante */
.ai-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 2s linear infinite;
}
.ai-spinner .track {
    fill: none;
    stroke: rgba(168, 85, 247, 0.1);
    stroke-width: 2;
}
.ai-spinner .car {
    filter: drop-shadow(0 0 5px #a855f7);
}

/* Il nucleo olografico */
.ai-avatar-hologram {
    width: 60px;
    height: 60px;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a855f7;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4), inset 0 0 20px rgba(168, 85, 247, 0.2);
    animation: hologramPulse 2s infinite ease-in-out;
    position: relative;
    z-index: 2;
}
.ai-avatar-hologram svg {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 0 5px currentColor);
}

/* Testo sotto il nucleo */
.processing-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: #a855f7;
    margin-top: 1rem;
    animation: textGlitch 3s infinite;
}

/* 2. Visualizzatore Documento (Sinistra) */
.doc-scan-visual {
    position: relative;
    background: linear-gradient(180deg, rgba(15, 17, 22, 0.9) 0%, rgba(10, 10, 12, 1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    height: 400px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Griglia HUD sovrapposta */
.grid-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
    z-index: 1;
}

/* Angoli HUD */
.scan-hud-corners::before, .scan-hud-corners::after {
    content: ''; position: absolute; width: 20px; height: 20px;
    border: 2px solid #3b82f6; z-index: 2;
}
.scan-hud-corners::before { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.scan-hud-corners::after { bottom: 20px; right: 20px; border-left: none; border-top: none; }

/* Documento Astratto */
.scanned-doc-preview {
    width: 200px;
    height: 280px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.doc-line {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    width: 100%;
}
.doc-line.l1 { width: 60%; }
.doc-line.l2 { width: 80%; }
.doc-line.l3 { width: 90%; }
.doc-line.l4 { width: 40%; margin-top: auto; }

/* 3. Laser Scanner Aggiornato */
.laser-scan-line {
    background: #3b82f6;
    height: 2px;
    box-shadow: 0 0 15px #3b82f6, 0 0 30px #3b82f6;
    z-index: 10;
}
.laser-trail {
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.5), transparent);
    height: 80px;
}

/* Badge Successo */
.success-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-weight: 600;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
    animation: badgePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- KEYFRAMES --- */
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hologramPulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 40px rgba(168, 85, 247, 0.6); } 100% { transform: scale(1); opacity: 0.8; } }
@keyframes badgePop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes textGlitch { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; text-shadow: 0 0 5px #a855f7; } }

/* Particle effects (semplice css implementation) */
.particles {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;
}
/* --- AI MODAL STYLES --- */

.ai-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(2, 2, 4, 0.85);
    backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
}

.ai-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.ai-modal-card {
    background: linear-gradient(145deg, rgba(15, 17, 22, 0.95), rgba(10, 10, 12, 0.98));
    border: 1px solid rgba(168, 85, 247, 0.3);
    width: 90%;
    max-width: 450px;
    padding: 3rem 2rem;
    border-radius: 24px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 30px rgba(168, 85, 247, 0.05);
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-modal-overlay.active .ai-modal-card {
    transform: scale(1) translateY(0);
}

/* Close Button */
.close-modal-btn {
    position: absolute;
    top: 15px; right: 15px;
    background: transparent; border: none;
    color: #64748b; cursor: pointer;
    transition: 0.3s;
}
.close-modal-btn:hover { color: #fff; transform: rotate(90deg); }

/* Avatar Glow Effect */
.modal-profile-glow {
    position: relative;
    width: 100px; height: 100px;
    margin: 0 auto 1.5rem auto;
    display: flex; align-items: center; justify-content: center;
}
.modal-profile-glow::before {
    content: ''; position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--neon-blue);
    filter: blur(20px);
    opacity: 0.4;
    animation: pulseCore 2s infinite;
}

.modal-avatar img {
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    object-fit: cover;
    position: relative;
    z-index: 2;
}

/* Typography */
.modal-title {
    font-size: 1.8rem;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(to right, #fff, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.modal-subtitle {
    color: #f87171; /* Rosso soft */
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-message {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}
.modal-message strong { color: #e2e8f0; font-weight: 600; }

/* LinkedIn Button Specifics */
.btn-linkedin-action {
    width: 100%;
    background: #0077b5; /* LinkedIn Blue */
    border-color: #0077b5;
    box-shadow: 0 0 20px rgba(0, 119, 181, 0.3);
    display: flex; align-items: center; justify-content: center;
}
.btn-linkedin-action:hover {
    background: #006396;
    box-shadow: 0 0 30px rgba(0, 119, 181, 0.5);
}

.modal-footer-note {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: #475569;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* --- UPGRADE VISIVO: EFFETTO PROFONDITÀ & NEON --- */

/* 1. Miglioramento Sfondo (Aurora Boreale Cyber) */
.bg-animation-container::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
    top: 20%;
    left: 20%;
    filter: blur(80px);
    animation: blobFloat 10s infinite alternate;
    z-index: 0;
}
.bg-animation-container::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    bottom: 10%;
    right: 10%;
    filter: blur(100px);
    animation: blobFloat 15s infinite alternate-reverse;
    z-index: 0;
}

@keyframes blobFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, -50px) scale(1.1); }
}

/* 2. Refactoring della Tabella Risultati (Stile "Card Fluttuanti") */
.ledger-table {
    border-collapse: separate;
    border-spacing: 0 8px; /* Spazio tra le righe */
    margin-top: -10px;
}

.ledger-header th {
    color: #64748b;
    font-size: 0.7rem;
    letter-spacing: 2px;
    border-bottom: none;
    padding-bottom: 1rem;
}

.ledger-row {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    position: relative;
}

/* Effetto Hover sulla riga */
.ledger-row:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: scale(1.01) translateX(5px);
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
    z-index: 2;
}

.ledger-row td {
    padding: 1.2rem 1.5rem;
    border-bottom: none; /* Rimuove la linea classica */
}

.ledger-row td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    color: #fff;
    font-weight: 500;
}
.ledger-row td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Totale evidenziato */
.ledger-table tfoot td {
    border-top: 1px dashed rgba(255,255,255,0.2) !important;
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

/* 3. Miglioramento Pulsante Upload (Effetto Liquid) */
.btn-glow {
    background: rgba(10, 10, 12, 0.6);
    overflow: visible;
}
.btn-glow::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
}
.btn-glow:hover::before {
    left: 100%;
    transition: 0.5s;
}

/* 4. Scansione Documento più realistica */
.doc-scan-visual {
    box-shadow: 
        0 0 0 1px rgba(59, 130, 246, 0.3),
        0 0 60px -20px rgba(59, 130, 246, 0.4);
}

.scan-tag {
    backdrop-filter: blur(4px);
    /* Aggiunge un puntino pulsante accanto al tag */
    display: flex; align-items: center; gap: 6px;
}
.scan-tag::before {
    content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}

/* 5. Terminale più "Matrix" */
.terminal-window {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(5, 5, 5, 0.95);
}
.log-entry {
    font-size: 0.8rem;
    border-left: 2px solid transparent;
    padding-left: 10px;
    transition: border-color 0.2s;
}
.log-entry:hover {
    border-left-color: var(--neon-purple);
    background: linear-gradient(90deg, rgba(168,85,247,0.05), transparent);
}

/* 6. Chips di selezione demo */
.demo-triggers .demo-chip {
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}
/* --- SECURITY HALO --- */
.trust-indicator-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 2rem;
    background: rgba(16, 185, 129, 0.05); /* Verde smeraldo molto tenue */
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 10px 20px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    animation: fadeIn 1s ease-out;
}

.security-icon-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.security-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: spinSlow 10s linear infinite;
}

.shield-icon {
    color: #10b981; /* Verde Trust */
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.5));
}

.trust-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.trust-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #10b981;
    letter-spacing: 1px;
}

.trust-sub {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
}

@keyframes spinSlow { 
    to { transform: rotate(360deg); } 
}
/* --- DATA STREAMS BACKGROUND --- */
.data-streams {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
}

.stream-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: flowDash 20s linear infinite;
}

.p1 { animation-duration: 15s; }
.p2 { animation-duration: 22s; animation-delay: -5s; }
.p3 { animation-duration: 18s; animation-delay: -10s; }

@keyframes flowDash {
    to { stroke-dashoffset: 0; }
}
/* --- 1. FINANCE FLOATING BACKGROUND --- */
.finance-floating-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.float-icon {
    position: absolute;
    color: rgba(59, 130, 246, 0.15); /* Blu molto tenue */
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2));
    animation: floatFinance 20s infinite linear;
}

/* Posizionamento e dimensioni diverse per ogni icona */
.f1 { width: 120px; top: 10%; left: 5%; animation-duration: 25s; opacity: 0.4; }
.f2 { width: 200px; bottom: 15%; right: -5%; animation-duration: 30s; animation-direction: reverse; color: rgba(16, 185, 129, 0.1); } /* Verde per il grafico */
.f3 { width: 80px; top: 40%; right: 20%; animation-duration: 18s; animation-delay: -5s; opacity: 0.3; }
.f4 { width: 150px; bottom: -20px; left: 30%; animation-duration: 22s; opacity: 0.2; }

@keyframes floatFinance {
    0% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-40px) rotate(10deg) scale(1.05); }
    100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* --- 2. HERO TEXT CENTERING & STYLING --- */
.hero-text {
    text-align: center; /* Assicura che tutto il blocco sia centrato */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra i figli flex orizzontalmente */
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

.hero-subtitle {
    color: #94a3b8;
    font-size: 1.3rem; /* Leggermente più grande */
    margin-top: 0.5rem;
    font-weight: 300;
    max-width: 600px; /* Evita che il testo si allarghi troppo */
    line-height: 1.6;
    background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Gradiente sul testo per effetto premium */
    letter-spacing: 0.5px;
}


/* Effetto luce al passaggio del mouse sulla card */
.result-card::before {
    content: '';
    position: absolute;
    top: 0; left: -50%;
    width: 200%; height: 100%;
    background: linear-gradient(
        60deg,
        transparent,
        rgba(255, 255, 255, 0.03),
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
    transition: 0.5s;
}

.result-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(168, 85, 247, 0.3); /* Bordo viola neon al passaggio */
}

.result-card:hover::before {
    left: 100%;
    transition: 0.7s ease-in-out;
}

/* Bordo superiore colorato per indicare "Successo" */
.result-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-green));
    opacity: 0.8;
}
/* ================================================= */
/* === 4. RESTYLING PULSANTI E UPLOAD (MODERNO)  === */
/* ================================================= */

/* --- PULSANTI "NEON FLUX" (Senza linea che scorre) --- */
.btn-glow {
    /* Reset stile precedente */
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(168, 85, 247, 0.4); /* Bordo viola sottile */
    color: #fff;
    padding: 1rem 3rem; /* Più spazioso */
    border-radius: 12px; /* Angoli moderni, non pillola */
    font-size: 1rem;
    font-weight: 600 !important;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 
        0 0 0 1px rgba(0,0,0,0), /* Placeholder per doppio bordo */
        0 10px 30px -10px rgba(168, 85, 247, 0.3); /* Ombra viola diffusa */
    backdrop-filter: blur(10px);
}

/* RIMUOVE LA LINEA CHE SCORRE */
.btn-glow::before {
    content: none !important; 
    display: none !important;
}

/* Nuovo effetto Hover: Luminosità e Salita */
.btn-glow:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(59, 130, 246, 0.2));
    border-color: #a855f7;
    transform: translateY(-3px); /* Si alza leggermente */
    box-shadow: 
        0 0 20px rgba(168, 85, 247, 0.6), /* Glow esterno forte */
        inset 0 0 20px rgba(168, 85, 247, 0.2); /* Glow interno */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* Testo luminoso */
}

/* Effetto Click */
.btn-glow:active {
    transform: scale(0.98) translateY(0);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}


/* --- UPLOAD CARD "TECH PORTAL" --- */
.upload-zone {
    /* Struttura base */
    width: 100%; 
    max-width: 850px; 
    height: 450px;
    
    /* Sfondo Profondo */
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.8) 100%);
    backdrop-filter: blur(20px);
    
    /* Bordi */
    border: 2px dashed rgba(255, 255, 255, 0.15); /* Tratteggiato elegante */
    border-radius: 30px; /* Molto arrotondato */
    
    /* Posizionamento */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Ombre */
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Aggiungiamo un "respiro" (pulsazione) quando è in attesa */
.upload-zone::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px;
    box-shadow: inset 0 0 40px rgba(59, 130, 246, 0.05);
    animation: breathingGlow 4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes breathingGlow {
    0%, 100% { box-shadow: inset 0 0 40px rgba(59, 130, 246, 0.05); }
    50% { box-shadow: inset 0 0 80px rgba(59, 130, 246, 0.15); }
}

/* Effetto Hover sulla Card Upload */
.upload-zone:hover {
    border-color: var(--neon-blue); /* Diventa blu neon */
    border-style: solid; /* Il bordo diventa solido */
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.9) 100%);
    transform: scale(1.01); /* Leggero ingrandimento */
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(59, 130, 246, 0.2), /* Glow esterno */
        inset 0 0 30px rgba(59, 130, 246, 0.1); /* Glow interno */
}

/* Stile icone fluttuanti dentro l'upload (ritocco) */
.doc-icon {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}
.upload-zone:hover .doc-icon {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(30, 41, 59, 0.9);
}
/* ================================================= */
/* === 5. UPLOAD ZONE: LEDGER UPGRADE & SPACING  === */
/* ================================================= */

/* Aggiornamento Struttura Card */
.upload-zone {
    /* Migliore gestione dello spazio interno */
    padding: 3rem 2rem; 
    gap: 1.5rem; /* Spazio verticale tra gli elementi */
    justify-content: flex-start; /* Inizia dall'alto, il gap gestisce il resto */
    overflow: hidden; /* Importante per tagliare le decorazioni */
    background: radial-gradient(120% 120% at 50% 10%, rgba(20, 20, 25, 0.9) 0%, rgba(5, 5, 8, 0.95) 100%);
}

/* --- DECORAZIONI DI SFONDO (LAYER) --- */
.upload-decor-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* 1. Pattern "Ledger" (Griglia Punteggiata) */
.ledger-grid {
    position: absolute;
    width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px; /* Distanza tra i puntini */
    opacity: 0.6;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%); /* Svanisce verso il basso */
}

/* 2. Grafico Finanziario sul fondo */
.bottom-chart {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 120px;
    z-index: 0;
    opacity: 0.6;
    transition: transform 0.5s ease;
}
/* Animazione leggera del grafico all'hover */
.upload-zone:hover .bottom-chart {
    transform: scaleY(1.2) translateY(-10px);
}

/* 3. Timbro "Verified" Rotante */
.stamp-decor {
    position: absolute;
    top: -20px; right: -20px;
    width: 140px; height: 140px;
    opacity: 0.4;
    animation: slowRotate 60s linear infinite;
}
@keyframes slowRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* --- CONTENUTO IN PRIMO PIANO --- */
.floating-docs-container, 
.upload-text-content, 
.btn-glow, 
.demo-triggers {
    position: relative;
    z-index: 2; /* Assicura che stiano sopra le decorazioni */
}

/* Tipografia Migliorata */
.upload-text-content {
    text-align: center;
}

/* Chips Demo più distanziate e stilizzate */
.demo-triggers {
    margin-top: auto; /* Spinge le chips in fondo se c'è spazio extra */
    padding-top: 1rem;
    display: flex; 
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    width: 100%;
    justify-content: center;
}

.demo-chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
}
.demo-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--neon-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* ================================================= */
/* === 6. UPLOAD ZONE: FINAL POLISH & CENTERING  === */
/* ================================================= */

/* Layout Card: Distribuzione Spaziale Migliorata */
.upload-zone {
    /* Reset per sicurezza */
    padding: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente il contenuto totale */
    align-items: center;     /* Centra orizzontalmente */
    gap: 2rem;               /* Spazio netto tra gruppo visivo e azioni */
    
    /* Manteniamo lo stile "Vetro" */
    background: radial-gradient(140% 140% at 50% 0%, rgba(20, 20, 28, 0.9) 0%, rgba(10, 10, 12, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

/* --- DECORAZIONI SFONDO --- */
.hex-grid {
    position: absolute;
    top: 0; left: 0;
    opacity: 0.4;
    mask-image: radial-gradient(circle, black 30%, transparent 80%); /* Visibile solo al centro */
}

.floating-coin {
    position: absolute;
    width: 80px; height: 80px;
    opacity: 0.5;
    filter: blur(2px);
    animation: floatCoin 8s infinite ease-in-out;
}
.c1 { top: 15%; left: 10%; animation-delay: 0s; }
.c2 { bottom: 20%; right: 10%; animation-delay: -4s; width: 60px; height: 60px; }

@keyframes floatCoin {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

/* --- GRUPPO VISIVO (Icone + Testo) --- */
.upload-visual-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin-top: 2rem; /* Spazio dal bordo superiore */
}

.upload-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(to bottom, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
}

.upload-subtitle {
    color: #64748b;
    font-size: 1.1rem;
    margin: 0;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* --- GRUPPO AZIONI (Bottone + Chips) --- */
.upload-action-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    z-index: 2;
    margin-bottom: 2rem; /* Spazio dal bordo inferiore */
}

/* Wrapper per centrare il bottone e l'anello pulsante */
.btn-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Anello che pulsa dietro il bottone */
.btn-pulse-ring {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 12px;
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7);
    animation: btnPulse 2s infinite;
    z-index: 0;
}

@keyframes btnPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(168, 85, 247, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

/* Stile specifico per il bottone UPLOAD (sovrascrittura per perfezione) */
.upload-action-content .btn-glow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 1rem 3.5rem; /* Più largo */
    background: #a855f7; /* Colore solido per il bottone principale */
    border: none;
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);
    z-index: 1;
    transition: transform 0.2s;
}

.upload-action-content .btn-glow:hover {
    transform: scale(1.05);
    background: #9333ea; /* Viola un po' più scuro all'hover */
    box-shadow: 0 15px 40px rgba(168, 85, 247, 0.6);
}

.btn-text {
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 1rem;
}

/* Chips Demo */
.demo-triggers {
    display: flex;
    gap: 12px;
    margin-top: 0.5rem;
}

.demo-chip {
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 6px 16px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
}
.demo-chip:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}
/* ================================================= */
/* === 7. TRUST BAR: REACTIVE & INTERACTIVE      === */
/* ================================================= */

.trust-bar-wrapper {
    margin-top: 3rem;
    width: 100%;
    max-width: 900px;
    text-align: center;
    animation: slideUp 0.8s ease-out 0.3s backwards; /* Entrata ritardata */
}

.trust-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #64748b;
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Card Singola */
.trust-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Effetto Hover */
.trust-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* --- STATO ATTIVO (On Click) --- */
.trust-item.active {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.1), rgba(5, 5, 5, 0.8));
    border-color: #10b981; /* Verde Matrix */
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
}

/* Icon Box */
.trust-icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #64748b;
    transition: all 0.3s;
}

.trust-item.active .trust-icon-box {
    background: #10b981;
    color: #000; /* Icona nera su sfondo verde */
    box-shadow: 0 0 15px #10b981;
}

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

/* Testi */
.trust-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

.brand-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    transition: color 0.3s;
}

.trust-item.active .brand-name {
    color: #fff;
}

.connection-status {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #475569;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Pallino di stato (generato via CSS) */
.connection-status::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #475569;
    transition: background-color 0.3s;
}

.trust-item.active .connection-status {
    color: #10b981;
}

.trust-item.active .connection-status::before {
    background-color: #10b981;
    box-shadow: 0 0 8px #10b981;
}

/* Flash Animation on Click */
@keyframes connectFlash {
    0% { background-color: rgba(255,255,255,0.8); }
    100% { background-color: transparent; }
}

.trust-item.active::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    animation: connectFlash 0.3s ease-out;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .trust-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonne su mobile */
    }
    .trust-item {
        padding: 0.8rem;
    }
}
/* ================================================= */
/* === 8. COMPACT MODE (NO SCROLL) FIX           === */
/* ================================================= */

/* Riduciamo il padding generale del contenitore */
.ai-demo-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    
    /* MODIFICA QUI: Aumentiamo il padding superiore */
    padding: 140px 2rem 2rem 2rem; /* Era '2rem' -> Ora '140px' per scendere sotto la nav */
    
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

/* Header più compatto */
.ai-demo-header {
    margin-bottom: 1rem; /* Era 4rem */
    padding-top: 0;
}
.header-logo {
    max-height: 32px; /* Leggermente più piccolo */
}

/* Titolo Hero ridotto */
.hero-text {
    margin-bottom: 0.5rem; /* Era 3rem */
}
.hero-text h1 {
    font-size: 3rem; /* Era 4rem */
    margin-bottom: 0.2rem;
}
.hero-subtitle {
    font-size: 1.1rem;
    margin-top: 0;
}

/* Security Halo più vicino */
.trust-indicator-container {
    margin-bottom: 1.5rem; /* Era 2rem */
    padding: 6px 16px;
    transform: scale(0.9); /* Leggermente più piccolo */
}

/* Upload Zone ottimizzata verticalmente */
.upload-zone {
    height: auto; /* Lascia che si adatti al contenuto */
    min-height: 380px; /* Ridotto da 450px */
    padding: 1.5rem 2rem; /* Meno padding verticale */
    gap: 1rem;
}

/* Icone documenti fluttuanti scalate */
.floating-docs-container {
    transform: scale(0.85);
    height: 130px; /* Ridotto l'ingombro */
    margin-bottom: 0; /* Rimuove margine extra */
}

.upload-visual-content {
    margin-top: 1rem;
}

.upload-action-content {
    margin-bottom: 1.5rem;
}

/* Trust Bar più vicina */
.trust-bar-wrapper {
    margin-top: 1.5rem; /* Era 3rem */
}
.trust-label {
    margin-bottom: 0.8rem;
}
.trust-item {
    padding: 0.6rem 0.8rem; /* Card più sottili */
}
.trust-icon-box {
    width: 32px; height: 32px; /* Icone più piccole */
}
.trust-icon-box svg {
    width: 18px; height: 18px;
}
.brand-name { font-size: 0.8rem; }
.connection-status { font-size: 0.6rem; }



.hero-text {
    margin-bottom: 1.5rem; /* Ridotto da 3rem */
}

.hero-text h1 {
    font-size: 3rem; /* Ridotto leggermente da 4rem per risparmiare spazio */
    margin-bottom: 0.5rem;
}

.upload-zone {
    height: 380px; /* Ridotto da 450px */
    padding: 2rem;
    margin-bottom: 1rem;
}

.trust-bar-wrapper {
    margin-top: 1rem; /* Ridotto da 3rem */
    margin-bottom: 1rem;
}

.trust-grid {
    gap: 1rem;
}

/* --- COOKIE BANNER --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.95);
    border-top: 1px solid var(--neon-purple);
    padding: 1.5rem;
    z-index: 9999;
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideUp 0.5s ease-out;
}

.cookie-banner.hidden {
    display: none;
}

.cookie-content {
    max-width: 1000px;
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;
    width: 100%;
}

.cookie-content p {
    color: #cbd5e1;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.cookie-content a {
    color: var(--neon-blue);
    text-decoration: none;
    border-bottom: 1px dashed var(--neon-blue);
}

.btn-glow.small {
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}
/* --- COOKIE CONSENT MANAGER (PRO STYLE) --- */
.cookie-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Sfondo scuro semitrasparente */
    backdrop-filter: blur(4px);
    z-index: 10000; /* Altissimo livello */
    display: flex;
    align-items: flex-end; /* Parte dal basso su mobile */
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cookie-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.cookie-modal {
    width: 100%;
    max-width: 700px;
    background: #1a1b23; /* Colore scuro professionale */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    border-radius: 16px 16px 0 0; /* Arrotondato solo sopra su mobile */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cookie-overlay:not(.hidden) .cookie-modal {
    transform: translateY(0);
}

@media (min-width: 768px) {
    .cookie-overlay {
        align-items: center; /* Al centro su desktop */
    }
    .cookie-modal {
        border-radius: 16px; /* Arrotondato ovunque su desktop */
        box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
}

/* Typography */
.cookie-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
}

.cookie-body {
    font-size: 0.9rem;
    color: #9ca3af;
    line-height: 1.5;
}

.cookie-body a, .legal-links a {
    color: var(--neon-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--neon-blue);
    transition: color 0.2s;
}
.cookie-body a:hover, .legal-links a:hover {
    color: #fff;
}

/* Preferences Panel */
.cookie-preferences {
    margin-top: 1rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 0.5rem;
    border: 1px solid rgba(255,255,255,0.05);
}
.cookie-preferences.hidden { display: none; }

.pref-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pref-row:last-child { border-bottom: none; }

.pref-info strong { display: block; color: #e2e8f0; font-size: 0.9rem; }
.pref-info span { display: block; font-size: 0.75rem; color: #64748b; }

/* Toggle Switch (iOS Style) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #4b5563;
    transition: .4s; border-radius: 24px;
}
.slider:before {
    position: absolute; content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: var(--neon-green); }
input:checked + .slider:before { transform: translateX(20px); }
.toggle-switch.disabled input:checked + .slider { background-color: #374151; opacity: 0.6; cursor: not-allowed; }

/* Footer & Buttons */
.cookie-footer {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .cookie-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.legal-links {
    font-size: 0.8rem;
    color: #64748b;
}
.legal-links .separator { margin: 0 0.5rem; opacity: 0.3; }

.cookie-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-cookie-secondary, .btn-cookie-primary {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cookie-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #e2e8f0;
}
.btn-cookie-secondary:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.05);
}

.btn-cookie-primary {
    background: var(--neon-purple);
    border: 1px solid var(--neon-purple);
    color: #fff;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}
.btn-cookie-primary:hover {
    background: #9333ea;
    transform: translateY(-1px);
}
/* --- FEATURES AGGIUNTIVE (Export & Chat) --- */

/* Toolbar Export */
.result-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
}

.toolbar-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    margin-right: 10px;
}

.tool-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: all 0.2s;
}

.tool-btn:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border-color: var(--neon-blue);
}

.tool-btn.xml:hover { border-color: var(--neon-purple); color: var(--neon-purple); }

/* AI Chat Section */
.ai-chat-section {
    margin-top: 2rem;
    max-width: 700px;
    margin-left: auto; margin-right: auto;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: rgba(10, 10, 12, 0.6);
    overflow: hidden;
}

.chat-header {
    padding: 1rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9rem;
    color: var(--neon-blue);
    display: flex; align-items: center; gap: 8px;
}

.chat-messages {
    padding: 1.5rem;
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-msg {
    max-width: 85%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: fadeIn 0.3s ease;
}

.chat-msg.user {
    align-self: flex-end;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.chat-msg.ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border-bottom-left-radius: 2px;
}

.chat-suggestions {
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.suggestion-chip {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #e9d5ff;
    cursor: pointer;
    transition: all 0.2s;
}

.suggestion-chip:hover {
    background: rgba(168, 85, 247, 0.2);
    transform: translateY(-2px);
}
/* ==========================================
   === MOBILE ULTRA-OPTIMIZATION (MAX)    ===
   ========================================== */

@media (max-width: 768px) {

   

    /* Riduciamo il carico grafico su mobile */
    .cyber-grid {
        opacity: 0.3; 
        animation: none; /* Ferma animazione per risparmio batteria */
    }
    
    /* Header compatto */
    .ai-demo-header {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .status-pill {
        font-size: 0.65rem; /* Pillola più piccola */
    }

    /* --- 2. HERO & TYPOGRAPHY --- */
    .hero-text h1 {
        font-size: 2.2rem; /* Titolo leggibile su mobile */
        line-height: 1.2;
    }
    
    .hero-text .hero-subtitle {
        font-size: 1rem;
        padding: 0 10px;
    }

    /* --- 3. UPLOAD ZONE (RIDISEGNATA PER MOBILE) --- */
    .upload-zone {
        height: auto; /* Altezza adattiva */
        min-height: auto;
        padding: 2rem 1rem;
        border-radius: 20px;
    }

    /* Rimpicciolisci le icone 3D che occupano troppo spazio */
    .floating-docs-container {
        transform: scale(0.7); 
        margin-bottom: 0;
        height: 120px;
    }

    .upload-action-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Pulsante Upload enorme e facile da premere */
    .btn-wrapper { width: 100%; }
    .btn-glow {
        width: 100%;
        padding: 1rem;
        font-size: 1.1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Chip di demo impilati o scrollabili */
    .demo-triggers {
        flex-direction: column; /* Uno sotto l'altro */
        width: 100%;
        gap: 0.8rem;
    }
    
    .demo-chip {
        width: 100%;
        text-align: center;
        padding: 0.8rem; /* Hit area più grande */
    }

    /* --- 4. TRUST BAR (GRID 2x2) --- */
    .trust-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonne invece di 4 */
        gap: 10px;
    }
    
    .trust-item {
        padding: 0.8rem;
        flex-direction: column; /* Icona sopra, testo sotto */
        text-align: center;
        gap: 0.5rem;
    }
    
    .trust-info {
        align-items: center; /* Centra testo */
    }

    /* --- 5. FASE PROCESSING (STACK VERTICALE) --- */
    .processing-layout {
        grid-template-columns: 1fr; /* Una colonna */
        gap: 1.5rem;
    }

    .doc-scan-visual {
        height: 250px; /* Meno alto su mobile */
    }

    .terminal-window {
        height: 200px; /* Terminale più compatto */
        font-size: 0.75rem;
    }

    /* --- 6. RISULTATI & TABELLA (CRUCIALE) --- */
    /* Wrapper per lo scroll orizzontale della tabella */
    .table-scroll-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Scroll fluido su iOS */
        border-radius: 12px;
        margin-bottom: 1rem;
        border: 1px solid rgba(255,255,255,0.1);
    }

    .ledger-table {
        min-width: 600px; /* Forza la larghezza minima per non schiacciare i numeri */
    }
    
    .ledger-table th, .ledger-table td {
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
    }

    /* Toolbar Export impilata o scrollabile */
    .result-toolbar {
        flex-wrap: wrap; /* Manda a capo se non ci sta */
        justify-content: center;
        gap: 0.8rem;
    }
    
    .tool-btn {
        flex-grow: 1; /* Pulsanti si espandono */
        justify-content: center;
        padding: 0.6rem;
    }

    /* --- 7. CHAT AI --- */
    .ai-chat-section {
        border-radius: 12px;
    }
    
    .chat-suggestions {
        overflow-x: auto; /* Scroll orizzontale per i suggerimenti */
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
    }
    
    .suggestion-chip {
        white-space: nowrap; /* Non mandare a capo il testo nel chip */
        flex-shrink: 0;
    }

    /* --- 8. COOKIE BANNER --- */
    .cookie-modal {
        border-radius: 20px 20px 0 0; /* Solo sopra */
        padding-bottom: 2rem; /* Spazio per la barra home iPhone */
    }
    
    .cookie-footer {
        flex-direction: column;
    }
    
    .btn-cookie-primary, .btn-cookie-secondary {
        width: 100%;
        text-align: center;
        padding: 1rem;
    }
}

/* --- SCHERMI MOLTO PICCOLI (iPhone SE, etc) --- */
@media (max-width: 380px) {
    .hero-text h1 { font-size: 1.8rem; }
    .floating-docs-container { display: none; } /* Nascondi animazione 3D se schermo troppo piccolo */
    .trust-grid { grid-template-columns: 1fr; } /* 1 colonna */
}
/* ==========================================
   === MOBILE ULTRA-OPTIMIZATION (FIXED)  ===
   ========================================== */

@media (max-width: 768px) {

    /* --- 1. CONTENITORE GENERALE --- */
    body {
        overflow-x: hidden; /* Impedisce lo scroll orizzontale della pagina */
    }
.ai-demo-wrapper {
        /* Su mobile la nav è più piccola, basta meno spazio */
        padding-top: 110px !important; 
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* --- 2. HEADER & HERO --- */
    .ai-demo-header {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
        align-items: center;
    }

    .hero-text h1 {
        font-size: 2rem; /* Font ridotto per evitare a capo brutti */
        line-height: 1.1;
        padding: 0 10px;
    }
    
    .hero-text .hero-subtitle {
        font-size: 1rem;
        padding: 0 10px;
    }

    /* --- 3. RISULTATI & TABELLA (IL PROBLEMA PRINCIPALE) --- */
    .result-card {
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 16px;
        background: rgba(15, 17, 22, 0.95); /* Meno trasparenza per leggibilità */
    }

    /* Wrapper Scrollabile per la Tabella */
    .table-scroll-wrapper {
        display: block;
        width: 100%;
        overflow-x: auto; /* Abilita scroll orizzontale SOLO sulla tabella */
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
        padding-bottom: 5px; /* Spazio per la scrollbar eventuale */
    }

    .ledger-table {
        width: 100%;
        min-width: 500px; /* Forza larghezza minima per non schiacciare i numeri */
    }
    
    .ledger-table th, .ledger-table td {
        padding: 0.8rem 0.5rem; /* Padding celle ridotto */
        font-size: 0.85rem;
    }

    /* --- 4. CHAT AI --- */
    .ai-chat-section {
        width: 100%;
        margin-top: 2rem;
        padding: 0;
    }

    .reasoning-box {
        margin: 1rem 0;
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* --- 5. TOOLBAR EXPORT --- */
    .result-toolbar {
        flex-direction: column; /* Bottoni uno sotto l'altro se necessario */
        gap: 0.5rem;
        align-items: stretch; /* Bottoni a larghezza piena */
    }
    
    .tool-btn {
        justify-content: center;
        width: 100%;
        background: rgba(255,255,255,0.08);
    }

    /* --- 6. UPLOAD ZONE --- */
    .upload-zone {
        min-height: auto;
        height: auto;
        padding: 2rem 1rem;
        width: 100%;
    }
    
    .floating-docs-container {
        transform: scale(0.7);
        margin-bottom: 0;
    }

    .demo-triggers {
        flex-direction: column;
        width: 100%;
    }
    
    .demo-chip {
        text-align: center;
        width: 100%;
    }

    /* --- 7. TRUST GRID --- */
    .trust-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonne */
        gap: 10px;
    }
    
    .trust-item {
        padding: 0.8rem;
        flex-direction: column;
        text-align: center;
    }
}
/* ======================================= */
/* === FIX SPINNER & CORE ANIMATION    === */
/* ======================================= */

/* 1. Contenitore Spinner: Rotazione Fluida e Centrata */
.ai-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Velocizzato a 1s per un effetto più "processore al lavoro" */
    animation: spin 1s linear infinite;
    /* Fondamentale per evitare l'effetto "oscillante" */
    transform-origin: center center; 
}

/* Assicuriamoci che il keyframe esista e sia corretto */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 2. La Traccia (L'anello di sfondo) */
.ai-spinner .track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05); /* Più sottile e scuro */
    stroke-width: 3; /* Leggermente più spesso */
}

/* 3. La parte attiva (L'arco che gira) */
.ai-spinner .car {
    fill: none; /* Assicuriamoci che non abbia riempimento */
    stroke: var(--neon-purple); /* Usa la variabile colore */
    stroke-width: 3; /* Spessore coerente */
    stroke-linecap: round; /* Arrotonda le estremità della linea */
    
    /* Effetto Neon Potenziato */
    filter: drop-shadow(0 0 8px var(--neon-purple));
}

/* 4. Animazione del "Cervello" (Icona centrale) */
.ai-avatar-hologram {
    /* Aggiunge una pulsazione coordinata */
    animation: hologramPulse 1.5s ease-in-out infinite alternate;
    transform-origin: center center;
}

@keyframes hologramPulse {
    0% { 
        transform: scale(0.95); 
        opacity: 0.7; 
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.2), inset 0 0 10px rgba(168, 85, 247, 0.1);
    }
    100% { 
        transform: scale(1.05); 
        opacity: 1; 
        box-shadow: 0 0 50px rgba(168, 85, 247, 0.6), inset 0 0 20px rgba(168, 85, 247, 0.3);
    }
}

/* 5. (Opzionale) Aggiunge un anello statico esterno per dare profondità */
.core-hud-advanced::after {
    content: '';
    position: absolute;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    animation: spin 10s linear infinite reverse; /* Gira piano al contrario */
    pointer-events: none;
}
/* ======================================= */
/* === DOWNLOAD BUTTON SPINNER FIX     === */
/* ======================================= */

/* Questa classe viene aggiunta via JS al click su Export */
.spin {
    animation: buttonSpin 1s linear infinite;
    transform-origin: center center; /* Assicura che ruoti sul proprio asse */
    display: inline-block; /* Necessario per far funzionare la trasformazione su SVG */
}

/* Animazione di rotazione standard */
@keyframes buttonSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* (Opzionale) Se vuoi che lo spinner sia di un colore specifico mentre gira */
.tool-btn .spin {
    color: var(--neon-purple); 
}
/* In demo_ai_styles.css */

/* Stato normale della Drop Zone */
.upload-zone {
    /* ... tue proprietà esistenti ... */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px dashed rgba(255, 255, 255, 0.2); /* Bordo base */
}

/* CLASSE ATTIVA (Drag Over) */
.upload-zone.drag-over {
    background: rgba(168, 85, 247, 0.15); /* Sfondo viola tenue */
    border-color: #a855f7; /* Bordo Viola Neon */
    border-style: solid; /* Bordo solido invece che tratteggiato */
    transform: scale(1.02); /* Leggero ingrandimento */
    box-shadow: 
        0 0 30px rgba(168, 85, 247, 0.3),
        inset 0 0 20px rgba(168, 85, 247, 0.1);
}

/* Opzionale: Fai brillare anche l'icona interna quando trascini */
.upload-zone.drag-over .btn-glow {
    background: #a855f7;
    box-shadow: 0 0 20px #a855f7;
    transform: scale(1.1);
}
/* ================================================= */
/* ===  RESULT CARD & TABLE UPGRADE (BREATHING)  === */
/* ================================================= */



/* 2. La Toolbar (Export Buttons): Più aria attorno ai bottoni */
.result-toolbar {
    display: flex;
    align-items: center;
    gap: 15px; /* Più spazio tra gli elementi */
    padding: 1.5rem 2rem; /* Aumentato drasticamente il padding (era 1rem) */
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
}

.toolbar-label {
    font-size: 0.7rem;
    letter-spacing: 1.5px; /* Più elegante */
    margin-right: 15px;
    opacity: 0.6;
}

/* 3. La Tabella: Spaziatura tra le righe (Effetto Floating) */
.ledger-table {
    width: 100%;
    /* Questo è il segreto: spazio reale tra le righe */
    border-collapse: separate; 
    border-spacing: 0 12px; /* Aumentato da 8px a 12px */
    margin-top: 1rem;
    padding: 0 1.5rem; /* Padding laterale della tabella intera */
}

/* Header della tabella */
.ledger-header th {
    color: #64748b;
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 600 !important;
    text-transform: uppercase;
    padding: 0 1.5rem 1rem 1.5rem; /* Più spazio sotto l'header */
    border-bottom: none;
}

/* 4. Le Righe dei Dati: Più alte e ariose */
.ledger-row td {
    /* Aumentato il padding verticale per far respirare il testo */
    padding: 1.5rem 2rem; 
    vertical-align: middle;
    border: none;
}

/* Stile della "pillola" riga */
.ledger-row {
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Arrotondamento angoli della riga */
.ledger-row td:first-child { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.ledger-row td:last-child { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }

/* Hover Effect più marcato */
.ledger-row:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px) scale(1.01); /* Leggero lift */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 5. Il Footer (TOTALE): Staccato e Imponente */
.ledger-table tfoot tr td {
    padding-top: 2.5rem; /* Molto spazio sopra il totale */
    padding-bottom: 1.5rem;
    border-top: 1px dashed rgba(255,255,255,0.1); /* Linea tratteggiata più sottile */
}

.ledger-table tfoot td:first-child {
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: #94a3b8;
}

.ledger-table tfoot .amount-dare,
.ledger-table tfoot .amount-avere {
    font-size: 1.6rem; /* Totale molto grande */
    font-weight: 400;
    text-shadow: 0 0 30px rgba(255,255,255,0.1);
}

/* --- MOBILE RESPONSIVE TWEAKS --- */
@media (max-width: 768px) {
    .result-toolbar { padding: 1rem; }
    .ledger-table { padding: 0 0.5rem; border-spacing: 0 8px; }
    .ledger-row td { padding: 1rem; } /* Riduco un po' su mobile per spazio */
    .ledger-header th { padding: 0 1rem 0.5rem 1rem; }
    .ledger-table tfoot .amount-dare, .ledger-table tfoot .amount-avere { font-size: 1.3rem; }
}
/* --- FIX TABELLA CONTABILE --- */
.ledger-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    margin-top: 1rem;
    table-layout: fixed; /* Forza larghezze fisse per stabilità */
}

/* Distanziamento Header */
.ledger-header th {
    color: #64748b;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    font-weight: 600 !important;
    text-transform: uppercase;
    padding: 0 1rem 1rem 1rem; /* Padding uniforme */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Larghezze specifiche per le colonne */
.ledger-header th:nth-child(1) { width: 50%; text-align: left; } /* Descrizione */
.ledger-header th:nth-child(2) { width: 25%; text-align: right; } /* Dare */
.ledger-header th:nth-child(3) { width: 25%; text-align: right; } /* Avere */

/* Distanziamento Celle */
.ledger-row td {
    padding: 1.2rem 1rem; /* Più spazio interno */
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.02);
}
/* --- FIX CHAT VISIBILITY --- */
.ai-chat-section {
    margin-top: 2rem;
    width: 100%;
    max-width: 800px;
    margin-left: auto; 
    margin-right: auto;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: rgba(10, 10, 12, 0.6);
    overflow: hidden;
    /* FIX CRUCIALE: Diamo un'altezza minima, altrimenti sembra vuota */
    min-height: 400px; 
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex-grow: 1; /* Occupa tutto lo spazio disponibile */
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 300px; /* Altezza fissa per lo scroll */
}

.chat-suggestions {
    padding: 1rem;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid rgba(255,255,255,0.05);
}
/* --- REFERRAL FORM STYLES --- */
.input-label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: #64748b;
}

.cyber-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 12px 12px 40px; /* Spazio per icona */
    border-radius: 8px;
    color: #fff;
    font-family: 'Inter Tight', sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

.cyber-input:focus {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.05);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

/* Tabs Toggle */
.contact-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #64748b;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.tab-btn.active {
    background: rgba(168, 85, 247, 0.15);
    border-color: #a855f7;
    color: #fff;
}

.tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
}

.mt-2 { margin-top: 0.5rem; }
/* --- 1. BOTTONE "GENERA LINK & SBLOCCA" (Viola Pieno) --- */
.btn-generate-link {
    width: 100%;
    background: linear-gradient(90deg, #a855f7 0%, #7c3aed 100%); /* Gradiente Viola */
    color: white;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); /* Ombra viola */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.btn-generate-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6);
}

.btn-generate-link:active {
    transform: translateY(0);
}

/* Effetto luccichio al passaggio */
.btn-generate-link::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.btn-generate-link:hover::after {
    left: 100%;
}


/* --- 2. PILLOLA "BOOST CORE (+50)" (Outline Neon) --- */
.btn-boost-core {
    background: rgba(10, 10, 12, 0.8); /* Sfondo scuro */
    border: 1px solid #a855f7;
    color: #fff;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 10px 24px;
    border-radius: 50px; /* Pillola */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.1), inset 0 0 10px rgba(168, 85, 247, 0.05);
    transition: all 0.3s ease;
}

.btn-boost-core:hover {
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    transform: scale(1.05);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.btn-boost-core i, .btn-boost-core svg {
    color: #e9d5ff; /* Icona leggermente più chiara */
}
/* --- REFERRAL SHARE BUTTONS --- */
.share-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Due colonne */
    gap: 10px;
    margin-bottom: 20px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
    color: #fff;
}

/* Colori Specifici per Piattaforma con effetto Neon */
.share-btn.linkedin:hover {
    background: rgba(0, 119, 181, 0.2);
    border-color: #0077b5;
    box-shadow: 0 0 15px rgba(0, 119, 181, 0.3);
}

.share-btn.twitter:hover { /* X brand color è nero, usiamo un grigio scuro luminoso */
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.share-btn.whatsapp:hover {
    background: rgba(37, 211, 102, 0.2);
    border-color: #25d366;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.3);
}

.share-btn.email:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: #a855f7;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

/* Stile hover per il bottone copia interno */
.copy-btn-inside:hover {
    background: rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}
/* ================================================= */
/* === MOBILE OPTIMIZATION PACK (NO ZOOM & UX)   === */
/* ================================================= */

@media screen and (max-width: 768px) {
    
    /* 1. FIX ZOOM SU IPHONE: Font-size minimo 16px */
    input, 
    select, 
    textarea, 
    .cyber-input, 
    .input-label {
        font-size: 16px !important; /* Cruciale per evitare lo zoom */
    }

    /* 2. INPUT PIÙ FACILI DA TOCCARE */
    .cyber-input {
        padding: 14px 14px 14px 45px; /* Più alti */
        height: 50px; /* Altezza esplicita comoda */
        border-radius: 12px;
        margin-bottom: 5px; /* Spazio extra */
    }
    
    /* Icone input centrate meglio */
    .input-icon {
        top: 50%;
        transform: translateY(-50%);
        left: 14px;
        width: 20px;
        height: 20px;
    }

    /* 3. MODALE "SHEET" (Stile Nativo iOS) */
    .ai-modal-overlay {
        align-items: flex-end; /* Modale parte dal basso */
        padding: 0;
    }

    .ai-modal-card {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0; /* Arrotondato solo sopra */
        margin: 0;
        padding: 2rem 1.5rem 3rem 1.5rem; /* Padding extra sotto per la Home Bar */
        max-height: 85vh; /* Non copre tutto lo schermo */
        overflow-y: auto; /* Scrollabile se la tastiera copre */
    }

    /* 4. BOTTONI GRANDI E FACILI */
    .btn-glow, 
    .tab-btn, 
    .share-btn {
        min-height: 50px; /* Altezza minima tattile */
        font-size: 1rem;
        touch-action: manipulation; /* Rimuove delay del tocco */
    }

    .tab-btn {
        padding: 12px;
    }

    /* 5. TITOLI E SPAZIATURA */
    .modal-title {
        font-size: 1.5rem;
    }
    
    .modal-profile-glow {
        width: 80px; height: 80px;
        margin-bottom: 1rem;
    }
    
    .modal-avatar img, 
    .modal-profile-glow div {
        width: 70px; height: 70px;
    }
    
    /* Fix per il bottone chiudi che non sia troppo in alto */
    .close-modal-btn {
        top: 20px; right: 20px;
        padding: 10px; /* Hit area più grande */
        font-size: 1.2rem;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
        width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
    }
}
/* --- HEADER RESPONSIVE TWEAKS --- */
@media screen and (max-width: 480px) {
    .mobile-hide {
        display: none; /* Nasconde la scritta "BOOST CORE" su schermi piccolissimi */
    }
    
    .status-pill {
        padding: 0.4rem 0.8rem;
        font-size: 0.65rem;
    }
    
    .header-logo {
        max-height: 28px; /* Logo leggermente più piccolo */
    }
}
@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 2.8rem;
        /* Riduciamo leggermente lo spazio su mobile ma manteniamo l'aria */
        margin-bottom: 2rem !important; 
        font-weight: 500 !important; /* Mantiene lo stile sottile anche su mobile */
    }
}
/* ================================================= */
/* === MOBILE STABILITY FIX (STOP SHAKING)       === */
/* ================================================= */

@media (max-width: 768px) {
    
    /* 1. DISATTIVA LA GRIGLIA 3D CHE TREMA */
    .cyber-grid {
        /* Rimuove la prospettiva pesante che causa il jitter */
        transform: none !important; 
        animation: none !important; 
        
        /* Rende la griglia piatta e stabile */
        background-size: 40px 40px; 
        opacity: 0.15;
        top: 0; left: 0; width: 100%; height: 100%;
    }

    /* 2. FERMA I BLOB DI SFONDO (Risparmia GPU) */
    .bg-animation-container::before,
    .bg-animation-container::after {
        animation: none !important; /* Blocca il movimento dei colori di fondo */
        opacity: 0.2; /* Meno invasivo */
    }

    /* 3. SCROLL FLUIDO */
    html, body {
        overflow-x: hidden; /* Evita scroll laterale indesiderato */
        width: 100%;
        position: relative;
    }
    
    /* 4. OTTIMIZZAZIONE TITOLO (Per evitare repaint continui) */
    .hero-text h1 {
        will-change: background-position; /* Suggerisce al browser di ottimizzare */
        /* Manteniamo l'animazione lenta che ti ho dato prima, ma ottimizzata */
    }
}
/* --- NUOVO MENU HAMBURGER --- */
.hamburger-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hamburger-btn:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: #a855f7;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

/* --- SIDE MENU OVERLAY --- */
.side-menu-overlay {
    position: fixed;
    top: 0; right: -100%; /* Nascosto a destra */
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
}

.side-menu-overlay.open {
    right: 0;
    opacity: 1;
    pointer-events: auto;
}

.menu-content {
    position: absolute;
    top: 0; right: 0;
    width: 300px;
    height: 100%;
    background: #0f1116;
    border-left: 1px solid rgba(255,255,255,0.1);
    padding: 2rem;
    box-shadow: -10px 0 40px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 1rem;
}

.menu-title {
    font-size: 0.8rem;
    color: #64748b;
    letter-spacing: 2px;
    font-weight: 700 !important;
}

.close-menu-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s;
}
.close-menu-btn:hover { transform: rotate(90deg); color: #a855f7; }

.menu-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.menu-links a {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 400 !important;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.menu-links a:hover {
    color: #a855f7;
    transform: translateX(5px);
}

.menu-links .highlight-link {
    color: #a855f7;
    font-weight: 600 !important;
}

/* --- NUOVO FOOTER --- */
.app-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.footer-tools {
    display: flex;
    gap: 15px;
    margin-bottom: 2rem;
    align-items: center;
}

.footer-pill {
    background: rgba(0, 0, 0, 0.3);
}

.footer-btn {
    padding: 0.4rem 1rem !important;
    font-size: 0.75rem !important;
}

.footer-legal {
    max-width: 800px;
    color: #475569;
}

.copyright {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #64748b;
    font-weight: 500 !important;
}

.disclaimer {
    font-size: 0.7rem;
    line-height: 1.5;
    opacity: 0.7;
}

/* Mobile responsive per footer e menu */
@media (max-width: 768px) {
    .menu-content { width: 80%; }
    .footer-tools { flex-direction: column; gap: 10px; }
    .disclaimer { font-size: 0.65rem; padding: 0 10px; }
}
/* 1. LOGO PIÙ GRANDE (Desktop) */
.header-logo {
    max-height: 60px; /* Aumentato da 40px */
    transition: all 0.3s ease;
}
/* --- HEADER MOBILE: Logo CENTRO (Grande) | Hamburger SINISTRA --- */
@media (max-width: 768px) {

    .ai-demo-header {
        display: flex !important;
        justify-content: center !important; 
        align-items: center !important;
        position: relative !important; 
        /* Aumentato da 70px a 80px per ospitare il logo più grande */
        height: 80px !important; 
        padding: 0 15px !important;
        margin-bottom: 2rem !important;
    }

    /* LOGO: Al Centro - PIÙ GRANDE */
    .header-logo {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        /* Aumentato da 40px a 55px (puoi arrivare a 60px se lo vuoi enorme) */
        max-height: 55px !important; 
        z-index: 10 !important;
    }

    /* HAMBURGER: Forzato a Sinistra */
    .hamburger-btn {
        position: absolute !important; 
        left: 15px !important; 
        top: 50% !important;
        transform: translateY(-50%) !important; 
        z-index: 20 !important;
        margin: 0 !important;
    }
    
    .ai-demo-header > div:not(.hamburger-btn):not(.header-logo) {
        display: none !important;
    }
}

/* Override per schermi molto piccoli se presenti regole specifiche */
@media screen and (max-width: 480px) {
    .header-logo {
        max-height: 45px !important; /* Mantiene la grandezza anche su schermi piccoli */
    }
}
/* ======================================================= */
/* === ANDROID TURBO BOOST (FIX LAG SCROLL)            === */
/* ======================================================= */

@media (max-width: 768px) {

    /* 1. DISATTIVA L'EFFETTO VETRO (Il killer delle performance) */
    .upload-zone,
    .result-card,
    .ai-chat-section,
    .trust-indicator-container,
    .btn-glow,
    .ai-modal-card,
    .side-menu-overlay, 
    .cookie-banner,
    .cookie-modal {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Sostituisce il vetro con un colore scuro solido e leggibile */
        background: #0f1116 !important; 
    }

    /* 2. RIMUOVI OMBRE PESANTI */
    .upload-zone, 
    .result-card,
    .btn-glow {
        box-shadow: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    /* 3. BLOCCA ANIMAZIONI DI SFONDO INUTILI */
    .bg-animation-container,
    .cyber-grid,
    .particles,
    .data-streams,
    .finance-floating-container {
        display: none !important; /* Rimuove completamente il background animato su mobile */
    }

    /* 4. OTTIMIZZAZIONE SCROLL HARDWARE */
    html, body {
        /* Abilita l'accelerazione hardware per lo scroll */
        -webkit-overflow-scrolling: touch !important; 
        overscroll-behavior-y: none; /* Evita rimbalzi strani */
        scroll-behavior: auto !important; /* Rimuove smooth scroll CSS che può confliggere */
    }

    /* 5. FIX UPLOAD ZONE */
    .upload-zone {
        background: #0f1116 !important; /* Sfondo nero solido */
        border-style: dashed !important;
    }

    /* 6. FIX CARD RISULTATI */
    .result-card {
        background: #0f1116 !important;
    }

    /* 7. RIDUCI CARICO SUI BOTTONI */
    .btn-glow {
        transform: translateZ(0) !important; /* Forza la GPU */
        transition: none !important; /* Rimuove animazioni hover che pesano durante lo scroll */
    }
    
    /* 8. PULIZIA GENERALE BACKGROUND */
    body {
        background-color: #020204 !important;
        background-image: none !important;
    }
}
/* --- SKELETON LOADING ANIMATION --- */
.skeleton-box {
    display: inline-block;
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05); /* Grigio scuro base */
    border-radius: 4px;
    width: 100%;
}

.skeleton-box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
    content: '';
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

/* Utilità per larghezze diverse */
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-80 { width: 80%; }
.w-100 { width: 100%; }
/* --- NUOVO STILE BOTTONE BOOST (Promo) --- */
.btn-boost-promo {
    /* INIZIO MODIFICA: Allineamento */
    display: inline-flex !important; /* Usa flexbox inline per il bottone */
    align-items: center !important; /* Centra verticalmente gli elementi figli (icona e testo) */
    justify-content: center !important; /* Opzionale: centra orizzontalmente se il bottone è più largo del contenuto */
    /* FINE MODIFICA: Allineamento */

    /* Sfondo gradiente per farlo risaltare sul nero */
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important; /* Testo più grassetto */
    letter-spacing: 0.5px !important;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4) !important;
    position: relative;
    overflow: hidden;
    padding: 10px 20px !important; /* Aggiunge un po' di respiro */
    border-radius: 50px !important; /* Forma a pillola */
    /* Animazione per attirare l'attenzione */
    animation: gentlePulse 2s infinite ease-in-out;
}
/* ... resto del CSS per hover e animazione ... */
/* --- STILE BOTTONI DISABILITATI (BETA) --- */

.tool-btn.disabled {
    opacity: 0.4;                /* Li rende semi-trasparenti */
    cursor: not-allowed;         /* Cambia il cursore in divieto */
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    color: #64748b;              /* Testo grigio spento */
    pointer-events: none;        /* Blocca qualsiasi interazione mouse */
}

/* Rimuove effetti hover se per caso rimangono attivi */
.tool-btn.disabled:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    color: #64748b;
}

/* Stile dell'etichetta "SOON" */
.beta-badge {
    display: inline-block;
    font-size: 0.6rem;
    background: rgba(168, 85, 247, 0.2); /* Viola scuro trasparente */
    color: #a855f7;                       /* Viola neon */
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
/* --- METRON LOGO INTEGRATION --- */

/* Contenitore per allineare Logo e Titolo H1 */
.hero-title-row {
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra orizzontalmente nella pagina */
    gap: 0.8rem;
    margin-bottom: 0.5rem; /* Spazio sotto prima del sottotitolo */
    flex-wrap: wrap; /* Su schermi piccolissimi va a capo se necessario */
}

/* Stile del Logo Metron */
.metron-logo {
    /* L'altezza è relativa alla dimensione del font dell'H1.
       Se H1 è 4rem, il logo sarà proporzionato. */
    height: 3.5rem; 
    width: auto;
    object-fit: contain;
    margin-top: 4px;
    /* Aggiunge un leggero filtro ombra per coerenza col neon */
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.4));
    animation: fadeIn 1s ease-out;
}

/* Override margine H1 per farlo stare nel flex container */
.hero-text h1 {
    margin-bottom: 0 !important; /* Rimuove il margine inferiore del vecchio H1 */
    line-height: 1.1;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .hero-title-row {
        gap: 0.1rem;
    }
    
    .metron-logo {
        height: 2.2rem; /* Si rimpicciolisce insieme al testo su mobile */
    }
}

@media (max-width: 480px) {
    .hero-title-row {
        flex-direction: column; /* Su schermi molto piccoli, metti il logo sopra il testo */
        gap: 0.5rem;
    }
    .metron-logo {
        height: 3rem; /* Logo ben visibile sopra il testo */
        margin-bottom: 1px;
    }
}
/* --- GRADIENTE H1 SPECIFICO (White -> #1440ff) --- */

.hero-text h1 {
    /* Gradiente richiesto: 0% bianco, 100% #1440ff */
    background: linear-gradient(90deg, #ffffff 0%, #1440ff 100%);
    
    /* Applica il gradiente al testo */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    
    /* Disabilita la vecchia animazione per mantenere i colori fissi */
    animation: none !important;
    
    /* Aggiunge un leggero bagliore blu coordinato per leggibilità sul nero */
    filter: drop-shadow(0 0 20px rgba(20, 64, 255, 0.4));
    
    /* Mantiene le spaziature corrette */
    margin-bottom: 0 !important;
    line-height: 1.1;
}
/* --- GLOBAL APP LOADER (LINKEDIN STYLE) --- */

#optlyx-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #020204; /* Stesso colore del body */
    z-index: 999999; /* Sopra a tutto, anche ai modali */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.6s step-end;
}

/* Classe per nascondere il loader */
#optlyx-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    animation: fadeIn 0.5s ease-out;
}

.loader-logo {
    width: 180px; /* Dimensione elegante */
    height: auto;
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.2));
    /* Effetto respiro lento */
    animation: loaderPulse 2s infinite ease-in-out;
}

/* Barra di caricamento sottile e moderna */
.loading-bar-container {
    width: 140px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.loading-bar-progress {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #3b82f6, #a855f7, #10b981);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
    animation: loaderBarMove 1.5s infinite ease-in-out;
}

/* Animazioni Keyframes */
@keyframes loaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes loaderBarMove {
    0% { left: -40%; width: 30%; }
    50% { width: 60%; }
    100% { left: 100%; width: 30%; }
}
/* --- LOADER MOBILE OPTIMIZATION --- */

@media (max-width: 768px) {
    .loader-logo {
        /* Riduciamo drasticamente la dimensione su mobile */
        width: 120px !important; 
        height: auto !important;
        
        /* Aggiustiamo l'animazione per essere meno invasiva su schermi piccoli */
        animation: loaderPulse 1.5s infinite ease-in-out;
    }

    .loading-bar-container {
        /* Barra più piccola e proporzionata */
        width: 100px; 
        height: 2px;
    }
}
/* --- HIDE METRON LOGO ON MOBILE --- */

@media (max-width: 768px) {
    /* Nasconde completamente l'immagine del logo Metron su mobile */
    .metron-logo {
        display: none !important;
    }
    
    /* Resetta l'allineamento del titolo H1 che ora è solo */
    .hero-title-row {
        display: block; /* O flex se vuoi centrare comunque */
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .hero-text h1 {
        margin: 0 auto; /* Centra il testo */
    }
}
/* --- NUOVA NAVBAR FLUTTUANTE (Dark Glass Theme) --- */
.glass-navbar {
    position: fixed; 
    top: 24px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 95%; 
    max-width: 1200px; 
    height: 72px; 
    z-index: 1000;
    
    /* Effetto Vetro Scuro per adattarsi al tema black */
    background: rgba(15, 23, 42, 0.6); 
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    border-radius: 100px; /* Circle Squared (Pillola) */
    
    display: flex; align-items: center; justify-content: space-between; 
    padding: 0 1.5rem;
    transition: all 0.4s ease;
}

.nav-logo { cursor: pointer; }
.nav-logo-img { height: 28px; width: auto; display: block; filter: brightness(1.2); }

.nav-links-center {
    display: flex; align-items: center; gap: 2rem;
    position: absolute; left: 50%; transform: translateX(-50%);
}

.nav-item {
    text-decoration: none; color: #94a3b8; font-size: 0.9rem; font-weight: 500;
    transition: color 0.2s ease; position: relative;
}
.nav-item:hover { color: #fff; }

/* Status Indicator nella nav */
.status-indicator {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 700; color: #10b981;
    background: rgba(16, 185, 129, 0.1); padding: 4px 10px;
    border-radius: 100px; border: 1px solid rgba(16, 185, 129, 0.2);
}
.pulse-dot {
    width: 6px; height: 6px; background: #10b981; border-radius: 50%;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.4); animation: pulseGreen 2s infinite;
}

.nav-right-side { display: flex; align-items: center; gap: 10px; }

/* Bottone CTA Navbar */
.btn-book-call {
    text-decoration: none; 
    background: #fff; color: #000;
    padding: 10px 20px; 
    border-radius: 100px; 
    font-size: 0.85rem; font-weight: 700;
    display: flex; align-items: center; gap: 8px; 
    transition: all 0.3s;
}
.btn-book-call:hover { transform: translateY(-2px); box-shadow: 0 0 15px rgba(255,255,255,0.4); }
.btn-book-call i { width: 16px; height: 16px; }

/* Adattamento Mobile */
@media (max-width: 900px) {
    .nav-links-center { display: none; }
    .glass-navbar { width: 92%; padding: 0 1rem; top: 15px; }
    .btn-book-call span { display: none; } /* Solo icona su mobile */
    .btn-book-call { padding: 10px; width: 40px; height: 40px; justify-content: center; }
}

/* Nascondi vecchio header se rimasto */
.ai-demo-header, .side-menu-overlay { display: none !important; }
/* ================================================= */
/* === FIX LAYOUT & SPAZIATURA (PATCH)           === */
/* ================================================= */

/* 1. Sblocca lo scroll e gestisce l'altezza della pagina */
body {
    overflow-y: auto !important; /* Abilita lo scroll verticale */
    height: auto !important;
    min-height: 100vh;
}

/* 2. Spinge il contenuto sotto la Navbar fissa */
.phase-container {
    padding-top: 140px !important; /* Spazio vitale per l'header */
    padding-bottom: 60px !important; /* Spazio in basso */
    justify-content: flex-start !important; /* Inizia dall'alto, non centrare forzatamente */
    height: auto !important; /* Lascia che il contenuto definisca l'altezza */
    min-height: 100vh;
}

/* 3. Sistema la Hero Section (Titoli) */
.hero-text {
    margin-bottom: 2rem !important;
    margin-top: 1rem !important;
}

/* 4. Espande la Upload Zone (il box viola scuro) */
.upload-zone {
    height: auto !important; /* Adattabile al contenuto */
    min-height: 500px !important; /* Altezza minima garantita */
    padding: 3rem 2rem !important; /* Più spazio interno */
    margin-bottom: 3rem !important;
    gap: 2rem !important; /* Spazio tra gli elementi interni (icone, testo, bottoni) */
    justify-content: center !important;
}

/* 5. Distanzia le icone di sicurezza */
.trust-indicator-container {
    margin-bottom: 2.5rem !important;
}

/* 6. Fix per schermi piccoli (Laptop) */
@media (max-height: 800px) {
    .phase-container {
        padding-top: 110px !important;
    }
    .upload-zone {
        min-height: 450px !important;
    }
}

/* 7. Fix per Mobile */
@media (max-width: 768px) {
    .phase-container {
        padding-top: 100px !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .hero-text h1 {
        font-size: 2.5rem !important; /* Titolo più piccolo su mobile */
    }
    
    .upload-zone {
        min-height: auto !important;
        padding: 2rem 1.5rem !important;
    }
}
/* --- COMPLIANCE & BETA STRIP --- */
.system-compliance-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px; /* Molto sottile */
    background: linear-gradient(90deg, #0f1116 0%, #1e1b2e 50%, #0f1116 100%);
    border-bottom: 1px solid rgba(168, 85, 247, 0.2); /* Bordo viola tenue */
    z-index: 100000; /* Sopra a tutto, anche alla navbar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    gap: 15px;
    font-family: 'Inter Tight', sans-serif;
    backdrop-filter: blur(5px);
}

.compliance-content {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.compliance-content strong {
    color: #a855f7; /* Viola Neon per "METRON BETA" */
    font-weight: 700;
}

.warn-icon {
    width: 14px; 
    height: 14px; 
    color: #f59e0b; /* Giallo avviso */
}

.compliance-link {
    color: #64748b;
    font-size: 0.65rem;
    text-decoration: underline;
    opacity: 0.7;
    white-space: nowrap;
}
.compliance-link:hover {
    color: #fff;
    opacity: 1;
}

.mobile-text { display: none; }

/* Adattamento Navbar esistente per non sovrapporsi */
body .glass-navbar {
    top: 45px !important; /* Spinge giù la navbar principale */
}

/* RESPONSIVE: Testo ridotto su mobile */
@media (max-width: 768px) {
    .system-compliance-bar {
        height: auto;
        min-height: 32px;
        padding: 6px 1rem;
        flex-wrap: wrap;
    }
    
    .desktop-text { display: none; }
    .mobile-text { display: inline; color: #cbd5e1; }
    
    /* Spinge ulteriormente giù il contenuto su mobile */
    body .glass-navbar {
        top: 40px !important; 
    }
    
    /* Aggiunge spazio al contenitore principale per non tagliare il titolo */
    .ai-demo-wrapper, .phase-container {
        padding-top: 130px !important;
    }
}
/* ========================================= */
/* === COMPLIANCE BAR (AI ACT / GDPR)    === */
/* ========================================= */

.system-compliance-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100000; /* Sopra a tutto, anche ai modali se necessario */
    background: #020204; /* Nero profondo per contrasto */
    border-bottom: 1px solid rgba(168, 85, 247, 0.3); /* Linea viola sottile */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    gap: 20px;
    font-family: 'Inter Tight', sans-serif;
    height: 36px; /* Altezza fissa su Desktop */
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.compliance-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.warn-icon {
    width: 14px; 
    height: 14px; 
    color: #f59e0b; /* Giallo Warning */
    flex-shrink: 0;
}

.beta-tag {
    color: #a855f7; /* Viola Neon */
    font-weight: 700;
    letter-spacing: 0.5px;
}

.compliance-link {
    font-size: 0.7rem;
    color: #64748b;
    text-decoration: underline;
    transition: color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.compliance-link:hover {
    color: #fff;
}

/* Gestione testi Desktop/Mobile */
.mobile-text { display: none; }

/* SPOSTAMENTO ELEMENTI ESISTENTI 
   (Fondamentale per non coprire la Navbar) 
*/
body .glass-navbar {
    top: 56px !important; /* 36px barra + 20px margine */
    transition: top 0.3s ease;
}

/* ========================================= */
/* === MOBILE OPTIMIZATION (Responsive)  === */
/* ========================================= */

@media (max-width: 768px) {
    
    .system-compliance-bar {
        height: auto; /* Altezza adattiva */
        min-height: 40px;
        padding: 8px 15px;
        flex-wrap: nowrap; /* Mantiene link e testo sulla stessa riga se possibile */
        justify-content: space-between;
        gap: 10px;
        background: rgba(2, 2, 4, 0.95);
        backdrop-filter: blur(10px);
    }

    .compliance-content {
        font-size: 0.7rem;
        white-space: normal; /* Permette al testo di andare a capo */
        line-height: 1.3;
        flex: 1; /* Prende tutto lo spazio disponibile */
    }

    /* Scambio testi per brevità su mobile */
    .desktop-text { display: none; }
    .mobile-text { display: inline; color: #cbd5e1; }

    .warn-icon {
        margin-top: 1px; /* Allineamento ottico col testo */
    }

    /* Spostamento Navbar Mobile ancora più giù */
    body .glass-navbar {
        top: 55px !important; 
    }

    /* Spinge il contenuto della pagina giù affinché non finisca sotto la nav */
    .ai-demo-wrapper, 
    .phase-container {
        padding-top: 145px !important; 
    }
}

/* Schermi piccolissimi (iPhone SE, ecc.) */
@media (max-width: 380px) {
    .system-compliance-bar {
        flex-wrap: wrap; /* Manda il link legale a capo se necessario */
        justify-content: center;
        text-align: center;
    }
    
    .compliance-content {
        justify-content: center;
    }
    
    body .glass-navbar {
        top: 75px !important; /* Più spazio perché la barra compliance è su 2 righe */
    }
}
/* ================================================= */
/* === FIX TABELLA: COMPATTA & ORDINATA (Final)  === */
/* ================================================= */

/* 1. Wrapper per gestire lo scroll solo se serve */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1rem;
    padding-bottom: 5px; /* Spazio per la scrollbar su Windows */
}

/* 2. Struttura Tabella */
.ledger-table {
    width: 100%;
    min-width: 600px; /* Larghezza minima per evitare schiacciamento testi */
    border-collapse: separate; 
    border-spacing: 0 4px; /* Ridotto drasticamente da 12px a 4px per essere più compatti */
    table-layout: fixed; /* Fondamentale: blocca le larghezze delle colonne */
}

/* 3. Gestione Colonne (Proporzioni Fisse) */
.ledger-header th {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.5rem 1rem; /* Padding header ridotto */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Definiamo le larghezze esatte per evitare che si "allarghino" a caso */
.ledger-header th:nth-child(1) { width: 50%; text-align: left; } /* Descrizione */
.ledger-header th:nth-child(2) { width: 25%; text-align: right; } /* Dare */
.ledger-header th:nth-child(3) { width: 25%; text-align: right; } /* Avere */

/* 4. Stile Righe (Card Sottili) */
.ledger-row td {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.8rem 1rem; /* Molto più compatto (era 1.5rem) */
    vertical-align: middle;
    font-size: 0.9rem;
    color: #e2e8f0;
    transition: background 0.2s;
    border: none; /* Rimuove bordi vecchi */
}

/* Arrotondamento angoli riga */
.ledger-row td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.ledger-row td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* Hover leggero */
.ledger-row:hover td {
    background: rgba(255, 255, 255, 0.06);
}

/* 5. Footer (Totali) */
.ledger-table tfoot td {
    padding-top: 1rem; /* Ridotto */
    padding-bottom: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.ledger-table tfoot .amount-dare,
.ledger-table tfoot .amount-avere {
    font-size: 1.1rem; /* Ridimensionato per essere elegante */
    font-weight: 700;
    color: #fff;
}

/* --- MOBILE SPECIFICS --- */
@media (max-width: 768px) {
    /* Su mobile lasciamo che la tabella sbordi per essere leggibile */
    .ledger-table {
        min-width: 550px; 
    }
    
    .ledger-row td {
        padding: 0.8rem 0.6rem; /* Padding laterale leggermente ridotto su mobile */
        font-size: 0.85rem;
    }
}
/* ================================================= */
/* === FIX SPACING: PADDING LATERALI TABELLA     === */
/* ================================================= */

/* 1. Il contenitore che fa scrollare */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1rem;
    padding-bottom: 5px; /* Spazio per scrollbar */
    
    /* --- MODIFICA QUI: PADDING AGGIUNTO --- */
    padding-left: 2rem !important; 
    padding-right: 2rem !important;
    box-sizing: border-box; /* Essenziale affinché il padding non rompa il 100% width */
}

/* 2. La Tabella stessa */
.ledger-table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate; 
    border-spacing: 0 4px;
    table-layout: fixed;
    /* Rimuoviamo padding dalla tabella stessa per darlo al wrapper */
    padding: 0; 
}

/* 3. Aggiustamento per Mobile (riduciamo un po' il padding) */
@media (max-width: 768px) {
    .table-scroll-wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
/* ======================================================= */
/* === ULTRA FIX: FORZA LARGHEZZA LISTA & RISULTATI    === */
/* ======================================================= */

.result-card, 
.reasoning-box, 
.ai-chat-section {
    /* Forza la larghezza identica alla Navbar */
    width: 95% !important;
    max-width: 1200px !important;
    
    /* Forza la centratura */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Assicura che il padding non aumenti la larghezza totale */
    box-sizing: border-box !important;
}

/* Fix extra per mobile: evita che tocchi i bordi */
@media (max-width: 768px) {
    .result-card, 
    .reasoning-box, 
    .ai-chat-section {
        width: 92% !important; /* Leggermente meno su mobile per aria laterale */
    }
}
/* ======================================================= */
/* === ULTRA FIX: FORZA LARGHEZZA LISTA & RISULTATI    === */
/* ======================================================= */

.result-card, 
.reasoning-box, 
.ai-chat-section {
    /* Forza la larghezza identica alla Navbar */
    width: 95% !important;
    max-width: 1200px !important;
    
    /* Forza la centratura */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Assicura che il padding non aumenti la larghezza totale */
    box-sizing: border-box !important;
}

/* Fix extra per mobile: evita che tocchi i bordi */
@media (max-width: 768px) {
    .result-card, 
    .reasoning-box, 
    .ai-chat-section {
        width: 92% !important; /* Leggermente meno su mobile per aria laterale */
    }
}
/* ======================================================= */
/* === ULTRA FIX: LARGHEZZA FASE LOADING (STRICT)      === */
/* ======================================================= */

.processing-layout, 
.ai-core-container {
    /* Forza la larghezza al 95% (come Navbar e Risultati) */
    width: 95% !important;
    max-width: 1200px !important;
    
    /* Centratura forzata */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Previene sbordamenti */
    box-sizing: border-box !important;
}