html, body { margin: 0; scroll-behavior: smooth; background-color: #0b0b0b; color: white; font-family: 'Poppins', sans-serif; }
        
        /* --- NUOVO HEADER HERO (STRUTTURA MATERIE) --- */
        .materia-title-outer {
            padding: 120px 5% 40px;
            text-align: center;
            background-color: #0b0b0b;
        }

        .materia-title-outer h1 {
            font-size: 4rem;
            color: #4facfe;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 4px;
            margin: 0;
            text-shadow: 0 0 30px rgba(79, 172, 254, 0.3);
        }

        .hero-materia {
            padding: 60px 5%;
            background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
            border-top: 1px solid rgba(79, 172, 254, 0.2);
            border-bottom: 1px solid rgba(79, 172, 254, 0.2);
            margin-bottom: 60px;
        }

        .hero-container {
            display: flex;
            align-items: center;
            gap: 60px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .hero-image-side { flex: 1.2; }
        .hero-image-side img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 25px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.6);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .hero-text-side { flex: 1; }
        .hero-text-side p {
            font-size: 1.05rem;
            color: #cbd5e1;
            text-align: justify;
            font-weight: 300;
            line-height: 1.8;
            margin: 0;
        }

        /* --- VECCHIO CONTENITORE SBOCCHI (RIPRISTINATO) --- */
        .sbocchi-intro { 
            max-width: 850px; 
            margin: 0 auto 60px; 
            padding: 40px; 
            border-radius: 20px; 
            background: rgba(79, 172, 254, 0.05); 
            border: 1px dashed #4facfe; 
            text-align: justify; 
        }

        .sbocchi-intro h2 { 
            color: #4facfe; 
            font-size: 2rem; 
            text-transform: uppercase; 
            margin-top: 0; 
            text-align: center; 
            font-weight: 800;
            margin-bottom: 25px;
        }

        .sbocchi-intro p { 
            font-size: 1.05rem; 
            color: #e0e0e0; 
            line-height: 1.8; 
            margin-bottom: 0; 
        }

        /* --- INFO CARDS --- */
        .info-container { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 25px; 
            max-width: 1200px; 
            margin: 0 auto 80px; 
            padding: 0 20px; 
        }

        .info-card { 
            background: #161616; 
            border-radius: 20px; 
            border: 1px solid rgba(255,255,255,0.05); 
            overflow: hidden; 
            transition: 0.4s; 
        }

        .info-card:hover { transform: translateY(-10px); border-color: #4facfe; }
        .card-image img { width: 100%; height: 200px; object-fit: cover; filter: brightness(0.8); }
        .card-content { padding: 25px; text-align: left; }
        .card-content h3 { color: #4facfe; font-size: 1.4rem; margin: 0 0 10px; }
        .card-content p { font-size: 0.95rem; color: #aaa; margin: 0; }

        .card-btn { 
            width: 100%; padding: 18px; border: none; background: rgba(255,255,255,0.03); 
            color: white; font-weight: 700; text-transform: uppercase; cursor: pointer; 
            border-top: 1px solid rgba(255,255,255,0.1); position: relative; transition: 0.3s; 
        }

        .card-btn:hover { background: #4facfe; color: #000; }

        .tooltip { 
            position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); 
            background: #4facfe; color: black; padding: 15px; border-radius: 12px; 
            font-size: 0.85rem; width: 250px; opacity: 0; visibility: hidden; 
            transition: 0.3s; text-align: center; pointer-events: none; font-weight: 500;
        }
        .card-btn:hover .tooltip { opacity: 1; visibility: visible; bottom: 130%; }

        /* --- NAVIGATION --- */
        .bottom-nav { display: flex; justify-content: center; align-items: center; gap: 40px; margin: 40px auto 100px; }
        .btn-bottom { padding: 14px 35px; border-radius: 50px; text-decoration: none; font-weight: 600; background: #4facfe; color: #000; transition: 0.3s; }
        .btn-bottom:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(79, 172, 254, 0.4); }
        .help-link { color: #4facfe; text-decoration: none; font-size: 0.9rem; text-transform: uppercase; font-weight: 600; }

        @media (max-width: 1024px) {
            .hero-container { flex-direction: column; }
            .info-container { grid-template-columns: 1fr; }
            .materia-title-outer h1 { font-size: 2.8rem; }
        }