/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: #2c3e50;
    background: 
        linear-gradient(rgba(15, 30, 60, 0.85), rgba(0, 0, 0, 0.95)),
        url('https://www.orizzontefinanziario.it/wallpaper3.jpg') center/cover fixed,
        linear-gradient(135deg, #0d3b4f 0%, #1a5f7a 30%, #0a1628 80%, #000000 100%);
    background-blend-mode: normal, multiply, normal;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(ellipse at 20% 80%, rgba(87,197,182,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(26,95,122,0.1) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zm0-30V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none; z-index: -1; opacity: 0.3;
}

/* ===== VARIABILI CSS ===== */
:root {
    --primary: #1a5f7a; --primary-dark: #0d3b4f; --primary-light: rgba(26, 95, 122, 0.1);
    --secondary: #57c5b6; --secondary-light: rgba(87, 197, 182, 0.15);
    --accent: #f39c12; --light: #ffffff; --dark: #1a202c;
    --gray: #64748b; --gray-light: #e2e8f0;
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-transparent: 0 4px 20px rgba(26, 95, 122, 0.15);
    --radius: 12px; --radius-sm: 8px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== UTILITIES ===== */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; position: relative; }
.section::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at top, rgba(87,197,182,0.03) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.section > * { position: relative; z-index: 1; }

.text-center { text-align: center; }
.mb-4 { margin-bottom: 1.5rem; }

/* ===== ANIMAZIONI BASE ===== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes statSlideUp { to { opacity: 1; transform: translateY(0); } }
@keyframes pulseSuccess { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.animate { opacity: 0; animation: fadeInUp 0.6s ease forwards; }
.animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }

.scroll-animate { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.scroll-animate.visible { opacity: 1; transform: translateY(0); }