/* === RESET & VARIABILI (Aether Tech Palette) === */
        :root {
            --base-deep: #020409;      /* Vuoto cosmico profondo */
            --base-panel: #0a0d17;     /* Pannello di controllo scuro */
            --base-highlight: #121829; /* Sfondo sezioni sovrapposte */
            
            --tech-orange: #bb00ff;    /* Energia / Interattività */
            --tech-orange-dim: rgba(164, 28, 255, 0.2);
            --tech-cyan: #00e5ff;      /* Dettagli tecnici freddi */
            --tech-cyan-dim: rgba(0, 229, 255, 0.15);
            --tech-purple: #8a2be2;    /* Profondità spaziale / Flusso dati */
            --tech-purple-dim: rgba(138, 43, 226, 0.2);
            
            --text-main: #FFFFFF;      /* Luce bianca stellare */
            --text-muted: #abb5c2;     /* Grigio siderale Soft */
            --header-h: 80px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* fallback */
        }
        
        h1, h2, h3, .logo {
            font-family: 'Montserrat', sans-serif; /* Immagina Orbitron, sans-serif per titoli */
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        body {
            background-color: var(--base-deep);
            color: var(--text-main);
            line-height: 1.6;
            overflow-x: hidden;
            background-image: radial-gradient(circle at 10% 20%, var(--base-deep) 0%, var(--base-panel) 70%);
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: var(--header-h);
        }

        /* === HEADER & STICKY MENU "ORBITAL" === */
        header {
            position: sticky;
            top: 0;
            height: var(--header-h);
            background-color: rgba(2, 4, 9, 0.92);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-bottom: 2px solid var(--tech-purple-dim);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 5%;
            box-shadow: 0 0 30px var(--tech-purple-dim);
        }

        .logo {
            font-size: 1.6rem;
            font-weight: 900;
            color: var(--text-main);
            text-decoration: none;
            text-shadow: 0 0 15px var(--tech-purple);
        }

        .logo span {
            color: var(--tech-orange);
            text-shadow: 0 0 10px var(--tech-orange);
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-menu a {
            text-decoration: none;
            color: var(--text-muted);
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-menu a:hover {
            color: var(--tech-orange);
            text-shadow: 0 0 8px var(--tech-orange);
        }
        
        /* Linea di sottolineatura olografica su hover */
        .nav-menu a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--tech-orange);
            box-shadow: 0 0 8px var(--tech-orange);
            transition: width 0.3s;
        }
        
        .nav-menu a:hover::after {
            width: 100%;
        }

        .hamburger {
            display: none;
            font-size: 2.2rem;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--tech-cyan);
            text-shadow: 0 0 10px var(--tech-cyan);
        }

        /* === SEZIONI GENERALI === */
        section {
            padding: 7rem 5%;
            position: relative;
        }

        .bg-alt {
            background-color: var(--base-highlight);
            background-image: linear-gradient(170deg, var(--base-highlight) 0%, var(--base-deep) 100%);
            border-top: 1px solid var(--tech-cyan-dim);
            border-bottom: 1px solid var(--tech-cyan-dim);
        }

        .section-header {
            text-align: center;
            margin-bottom: 5rem;
        }

        .section-header h2 {
            font-size: 2.8rem;
            margin-bottom: 1rem;
            color: var(--text-main);
            position: relative;
            display: inline-block;
        }

        /* Decorazione tech avanzata sotto i titoli */
        .section-header h2::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, transparent, var(--tech-orange), transparent);
            margin: 15px auto 0;
            box-shadow: 0 0 15px var(--tech-orange);
        }

        .section-header p {
            max-width: 850px;
            margin: 0 auto;
            color: var(--text-muted);
            font-size: 1.15rem;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 3rem;
        }

        /* === HERO SECTION "WARP CORE" === */
        .hero {
            min-height: calc(100vh - var(--header-h));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.1) 0%, var(--base-deep) 70%);
            padding: 2rem 5%;
            position: relative;
        }

        /* Placeholder per l'immagine profilo asimmetrica */
        .hero-profile-img {
            width: 170px;
            height: 170px;
            background-color: var(--base-panel);
            border: 2px solid var(--tech-purple);
            /* Forma asimmetrica 'tech-cut' */
            clip-path: polygon(10% 0%, 100% 10%, 90% 100%, 0% 90%);
            margin-bottom: 2.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--tech-cyan);
            font-weight: bold;
            box-shadow: 0 0 30px var(--tech-purple-dim);
            position: relative;
        }
        
        /* Dettaglio sensore d'angolo */
        .hero-profile-img::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            bottom: 0;
            right: 0;
            background-color: var(--tech-orange);
            box-shadow: 0 0 10px var(--tech-orange);
        }

        .hero h1 {
            font-size: 4.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.1;
            letter-spacing: -2px;
            text-shadow: 0 0 20px var(--tech-purple-dim);
        }

        .hero p {
            font-size: 1.3rem;
            color: var(--text-muted);
            max-width: 850px;
            margin-bottom: 3.5rem;
        }

        /* === CARDS "AETHER PANELS" === */
        .card {
            background: var(--base-panel);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.03);
            transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
        }

        .card:hover {
            transform: translateY(-12px) scale(1.01);
            border-color: var(--tech-orange);
            box-shadow: 0 20px 40px rgba(255, 159, 28, 0.1), inset 0 0 10px rgba(255, 159, 28, 0.1);
        }
        
        /* Angolo tecnico sovrapposto su hover */
        .card::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            top: 0;
            right: 0;
            background-color: var(--tech-cyan);
            clip-path: polygon(0 0, 100% 0, 100% 100%);
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .card:hover::after {
            opacity: 1;
        }

        .card-img-placeholder {
            width: 100%;
            height: 240px;
            background: linear-gradient(135deg, var(--base-panel), #161e31);
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-muted);
            font-weight: 600;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            position: relative;
            overflow: hidden;
        }
        
        /* Effetto 'griglia tecnica' di fondo */
        .card-img-placeholder::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(var(--tech-cyan-dim) 1px, transparent 1px), linear-gradient(90deg, var(--tech-cyan-dim) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.3;
        }

        .card-content {
            padding: 2.5rem 1.8rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
        }

        .card-title {
            font-size: 1.4rem;
            margin-bottom: 1rem;
            color: var(--text-main);
            letter-spacing: 1px;
            text-shadow: 0 0 10px var(--tech-purple-dim);
        }

        .card-desc {
            color: var(--text-muted);
            margin-bottom: 2.5rem;
            flex-grow: 1;
            font-size: 1rem;
        }

        /* === BOTTONI "ENERGY CONSOLE" === */
        .btn {
            display: inline-block;
            background-color: var(--tech-orange);
            color: var(--base-deep);
            padding: 0.9rem 2.2rem;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            box-shadow: 0 0 15px var(--tech-orange-dim);
            position: relative;
            overflow: hidden;
        }

        .btn:hover {
            background-color: var(--base-deep);
            color: var(--tech-orange);
            box-shadow: 0 0 25px var(--tech-orange), inset 0 0 10px var(--tech-orange-dim);
            border: 1px solid var(--tech-orange);
        }
        
        /* Bottoni 'alternati' o secondari */
        .btn-alt {
            background-color: transparent;
            color: var(--tech-cyan);
            border: 1px solid var(--tech-cyan);
            box-shadow: 0 0 10px var(--tech-cyan-dim);
        }
        
        .btn-alt:hover {
            background-color: var(--tech-cyan);
            color: var(--base-deep);
            box-shadow: 0 0 20px var(--tech-cyan);
            border: 1px solid var(--tech-cyan);
        }

/* === REFERRALS GRID "CIRCUIT BOARD" === */
.referrals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}

.ref-card {
    border-radius: 50%; /* Card circolari per referrals */
    aspect-ratio: 1 / 1;
    overflow: hidden; /* Forza tutto il contenuto, comprese le immagini, dentro il cerchio */
    border-color: var(--tech-purple);
    box-shadow: 0 0 20px var(--tech-purple-dim);
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    
    /* Configurazione per l'immagine di sfondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Sovrapposizione scura interna per proteggere la leggibilità del testo bianco */
.ref-card .card-content {
    padding: 2.5rem 2rem;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Filtro scuro che si fonde con lo sfondo del sito */
    background-color: rgba(10, 13, 23, 0.82); 
    transition: background-color 0.4s ease;
}

/* EFFETTI HOVER */
.ref-card:hover {
    transform: scale(1.05);
    border-color: var(--tech-cyan);
    box-shadow: 0 0 30px var(--tech-cyan);
}

/* Al passaggio del mouse, la maschera si schiarisce rivelando di più l'immagine sottostante */
.ref-card:hover .card-content {
    background-color: rgba(10, 13, 23, 0.6); 
}

        /* === FOOTER === */
        footer {
            background-color: #010205; /* Ancora più scuro per staccare */
            border-top: 2px solid var(--tech-purple-dim);
            color: var(--text-muted);
            padding: 6rem 5% 2rem;
            text-align: center;
            position: relative;
        }

        footer h3 {
            color: var(--text-main);
            margin-bottom: 2rem;
            font-size: 2rem;
            letter-spacing: 2px;
            text-shadow: 0 0 15px var(--tech-purple);
        }

        footer p {
            max-width: 650px;
            margin: 0 auto 3.5rem;
        }

        .social-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.8rem;
            margin-bottom: 3.5rem;
        }

        .social-placeholder {
            width: 55px;
            height: 55px;
            background-color: var(--base-panel);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px; /* Leggermente squadrata, più tech */
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-main);
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.3s;
        }

        .social-placeholder:hover {
            border-color: var(--tech-cyan);
            color: var(--tech-cyan);
            box-shadow: 0 0 20px var(--tech-cyan), inset 0 0 10px var(--tech-cyan-dim);
            transform: translateY(-5px);
        }

        .copyright {
            border-top: 1px solid rgba(255, 255, 255, 0.03);
            padding-top: 2.5rem;
            font-size: 0.9rem;
            letter-spacing: 2px;
        }

        /* === HERO SOCIAL LINKS === */
        .hero-social-links {
            display: flex;
            gap: 1.5rem;
            margin-top: 2.5rem; /* Spazio dal pulsante principale */
            justify-content: center;
            align-items: center;
        }

        .hero-social-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 45px;
            height: 45px;
            color: var(--tech-cyan); /* Usa il colore ciano per contrastare il bottone */
            background-color: rgba(0, 229, 255, 0.05); /* Sfondo semi-trasparente */
            border: 1px solid var(--tech-cyan-dim);
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .hero-social-icon svg {
            width: 20px;
            height: 20px;
        }

        /* Effetto Neon al passaggio del mouse */
        .hero-social-icon:hover {
            background-color: var(--tech-cyan);
            color: var(--base-deep); /* L'icona diventa scura quando il cerchio si riempie */
            box-shadow: 0 0 15px var(--tech-cyan), inset 0 0 10px rgba(255, 255, 255, 0.4);
            transform: translateY(-4px); /* Si solleva leggermente */
            border-color: var(--tech-cyan);
        }

        /* === RESPONSIVE (MOBILE) === */
        @media (max-width: 768px) {
            .hamburger {
                display: block;
            }

            .nav-menu {
                position: absolute;
                top: var(--header-h);
                left: 0;
                width: 100%;
                height: 100vh; /* Menu a schermo intero */
                background-color: rgba(2, 4, 9, 0.96);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                flex-direction: column;
                justify-content: center; /* Centra gli elementi verticalmente */
                gap: 1.5rem; /* Riduci il gap */
                border-bottom: 2px solid var(--tech-orange);
                clip-path: circle(0% at 90% 0%); /* Nascosto con effetto cerchio */
                transition: clip-path 0.5s ease-in-out;
            }

            .nav-menu.active {
                clip-path: circle(150% at 90% 0%); /* Effetto di espansione stellare */
            }

            .nav-menu li {
                width: 80%; /* Centra orizzontalmente */
                text-align: center;
                border-top: none; /* Rimuovi bordo top per menu centrale */
            }

            .nav-menu a {
                display: block;
                padding: 1rem 0; /* Riduci padding per menu centrale */
                font-size: 1.3rem; /* Aumenta font size */
            }
            
            .nav-menu a::after {
                bottom: 0px;
                left: 50%;
                transform: translateX(-50%);
            }

            .hero h1 {
                font-size: 3rem;
            }
        }

        /* 1. IL CONTENITORE: Ospita la griglia tecnologica nello sfondo */
        .card-image-wrapper {
            width: 100%;
            min-height: 250px;
            max-height: 380px; 
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            
            /* Spostiamo la griglia olografica nello sfondo del contenitore */
            background-color: var(--base-panel);
            background-image: linear-gradient(rgba(10, 13, 23, 0.7), rgba(10, 13, 23, 0.7)), /* Oscurisce il fondo */
                            linear-gradient(var(--tech-cyan-dim) 1px, transparent 1px), 
                            linear-gradient(90deg, var(--tech-cyan-dim) 1px, transparent 1px);
            background-size: 100% 100%, 25px 25px, 25px 25px;
            background-position: center center;
            
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 25px; /* Margine per far respirare le copertine e mostrare la griglia laterale */
        }

        /* 2. L'IMMAGINE: Mantiene la proporzione e ha angoli arrotondati */
        .card-image-wrapper img {
            max-width: 100%;
            max-height: 340px;
            width: auto;
            height: auto;
            object-fit: contain; 
            transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
            
            /* ECCO L'ARROTONDAMENTO DEGLI ANGOLI */
            border-radius: 12px; /* Puoi aumentare (es. 16px) o diminuire questo valore */
            
            /* Aggiungiamo un'ombra per staccare l'immagine dalla griglia di fondo e farla "fluttuare" */
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 229, 255, 0.15);
            
            position: relative;
            z-index: 2; /* Assicura che l'immagine stia sempre sopra la griglia */
        }

        /* 3. L'EFFETTO ZOOM AL PASSAGGIO DEL MOUSE */
        .card:hover .card-image-wrapper img {
            transform: scale(1.06); 
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 229, 255, 0.3); /* L'ombra si illumina */
        }

        /* Nota: Rimuovi completamente la regola .card-image-wrapper::after che avevamo usato in precedenza */

        .hero-profile-real {
            width: 170px;
            height: 170px;
            object-fit: cover;
            border: 2px solid var(--tech-purple);
            /* Mantieni il taglio asimmetrico */
            clip-path: polygon(10% 0%, 100% 10%, 90% 100%, 0% 90%);
            margin-bottom: 2.5rem;
            box-shadow: 0 0 30px var(--tech-purple-dim);
            position: relative;
            /* Un filtro per rendere la tua foto adatta al tema scuro */
            filter: grayscale(20%) contrast(110%) brightness(0.9);
        }

        /* Il contenitore luminoso: è lui che crea i "triangolini" agli angoli */
        .hero-profile-wrapper {
            width: 180px;
            height: 180px;
            margin-bottom: 2.5rem;
            position: relative;
            
            /* COLORE DEI TRIANGOLINI: Qui usiamo il Ciano, ma puoi usare var(--tech-purple) o var(--tech-orange) */
            background-color: var(--tech-orange); 
            
            /* L'effetto "Glow" (Bagliore) per farli risaltare come luci al neon */
            box-shadow: 0 0 25px var(--tech-orange), inset 0 0 15px rgba(0, 0, 0, 0.8);
            border-radius: 2px;
        }

        /* La foto tagliata che sta sopra al contenitore */
        .hero-profile-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            
            /* Il taglio asimmetrico: gli angoli mancanti lasciano vedere il colore Ciano sotto! */
            clip-path: polygon(10% 0%, 100% 10%, 90% 100%, 0% 90%);
            
            /* Ottimizzazione cromatica della foto per fonderla col tema scuro */
            filter: grayscale(20%) contrast(110%) brightness(0.9);
        }

/* Dettagli angolari sci-fi sovrapposti */
.hero-profile-wrapper::before,
.hero-profile-wrapper::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 10;
    pointer-events: none;
}

/* Staffa Ciano in alto a sinistra */
.hero-profile-wrapper::before {
    top: -8px;
    left: -8px;
    border-top: 3px solid var(--tech-orange);
    border-left: 3px solid var(--tech-orange);
    box-shadow: -5px -5px 15px var(--tech-orange-dim);
}

/* Staffa Ciano in basso a destra */
.hero-profile-wrapper::after {
    bottom: -8px;
    right: -8px;
    border-bottom: 3px solid var(--tech-orange);
    border-right: 3px solid var(--tech-orange);
    box-shadow: 5px 5px 15px var(--tech-orange-dim);
}

/* === LANGUAGE SWITCHER === */
.lang-switcher {
    display: flex;
    gap: 8px;
    margin-left: auto;
    margin-right: 2rem; /* Spazio prima dell'hamburger menu se visibile */
}

.lang-btn {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s;
}

.lang-btn:hover {
    border-color: var(--tech-cyan);
    color: var(--tech-cyan);
}

/* Stato attivo (Lingua selezionata) */
.lang-btn.active {
    border-color: var(--tech-orange);
    color: var(--tech-orange);
    box-shadow: 0 0 10px var(--tech-orange-dim);
}

/* Adattamento Mobile */
@media (max-width: 768px) {
    .lang-switcher {
        margin-right: 1rem;
    }
}

/* === BACK TO TOP BUTTON === */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: var(--base-panel);
    border: 1px solid var(--tech-purple);
    color: var(--tech-cyan);
    border-radius: 8px; /* Taglio squadrato stile pannello tech */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    z-index: 999;
    
    /* Stato iniziale: nascosto e leggermente spostato verso il basso */
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    box-shadow: 0 0 15px var(--tech-purple-dim);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

/* Classe attivata via JavaScript quando l'utente scende nella pagina */
.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Effetto Hover Futuristico */
.back-to-top:hover {
    border-color: var(--tech-cyan);
    color: var(--base-deep);
    background-color: var(--tech-cyan);
    box-shadow: 0 0 20px var(--tech-cyan);
}

/* La freccia si muove leggermente verso l'alto al passaggio del mouse */
.back-to-top:hover svg {
    transform: translateY(-2px);
}

/* Ottimizzazione Mobile: riduciamo la dimensione per non coprire i contenuti */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}