/* 
   Style Sheet for Attilio Viscido Landing Page 
   Palette based on BiStrategy Brand:
   - Primary Blue: #076FB7
   - Accent Gold: #D3B574
   - Dark/Black: #0D1117 (rich dark background)
   - Secondary Dark: #161B22
   - White: #FFFFFF
*/

:root {
    --primary: #076FB7;
    --primary-light: #2A8CD4;
    --accent: #D3B574;
    --accent-hover: #b89a57;
    --dark-bg: #0D1117;
    --card-bg: #161B22;
    --text-main: #c9d1d9;
    --text-white: #ffffff;
    --text-dark: #24292e;
    --light-bg: #f6f8fa;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1,
h2,
h3 {
    font-weight: 800;
    line-height: 1.2;
}

h1 span:not([class^="lang-"]),
h2 span:not([class^="lang-"]) {
    color: var(--primary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.text-white h2 {
    color: var(--text-white);
}

/* Header */
header {
    background: rgba(13, 17, 23, 0.85);
    /* Dark background */
    backdrop-filter: blur(15px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-white);
    font-size: 1.8rem;
    font-weight: 800;
    transition: var(--transition);
}

.logo-img {
    height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: var(--transition);
    filter: drop-shadow(0 2px 6px rgba(7, 111, 183, 0.35));
}

.logo:hover .logo-img {
    transform: scale(1.08) rotate(-3deg);
    filter: drop-shadow(0 4px 12px rgba(7, 111, 183, 0.55));
}

.logo-name {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-white);
    white-space: nowrap;
}

.logo-dot {
    color: var(--accent);
}

.hamburger {
    display: none;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

nav ul li a {
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--text-main);
    padding: 8px 15px;
    border-radius: 8px;
}

nav ul li a:hover {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--text-white);
    box-shadow: 0 4px 15px rgba(7, 111, 183, 0.3);
}

.btn-primary:hover {
    background-color: var(--primary-light);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(7, 111, 183, 0.4);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-secondary:hover {
    background-color: var(--primary);
    color: var(--text-white);
    transform: translateY(-3px);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    /* Offset for header */
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hero-text {
    flex: 1;
}

.hero-text h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
}

.hero-text h2 {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 20px;
    font-weight: 600;
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: #555;
    max-width: 500px;
}

.cta-group {
    display: flex;
    gap: 15px;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.image-wrapper {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    padding: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--text-white);
}

.experience-badge {
    position: absolute;
    bottom: 20px;
    right: 0;
    background: var(--dark-bg);
    color: var(--accent);
    padding: 10px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    animation: float 3s ease-in-out infinite;
}

/* About Section */
.about {
    padding: 100px 0;
    background-color: var(--text-white);
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.section-title p {
    color: #666;
    font-size: 1.1rem;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.about-card {
    background: var(--light-bg);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.about-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    background: white;
    border-color: var(--accent);
}

.icon-box {
    width: 70px;
    height: 70px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 20px;
    transition: var(--transition);
}

.about-card:hover .icon-box {
    background: var(--accent);
}

.about-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.about-card p {
    color: #555;
    font-size: 0.95rem;
}

/* Certification Section */
.certification {
    padding: 0 0 100px;
    background-color: var(--text-white);
}

.cert-banner {
    background: linear-gradient(135deg, var(--dark-bg), var(--card-bg));
    border: 1px solid rgba(211, 181, 116, 0.3);
    border-radius: 20px;
    padding: 50px;
    display: flex;
    align-items: center;
    gap: 40px;
    color: var(--text-main);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.cert-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: var(--accent);
}

.cert-icon {
    font-size: 4rem;
    color: var(--accent);
    flex-shrink: 0;
}

.cert-text h2 {
    color: var(--text-white);
    font-size: 2rem;
    margin-bottom: 15px;
}

.cert-text p {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Disclaimer Banner */
/* Il disclaimer riutilizza la struttura e le proporzioni del banner ISO 27001 (padding, spaziature, ombre). 
   Tuttavia, si differenzia applicando un gradiente che sfuma dal colore primario scuro al backgruond,
   creando così uno stacco cromatico deciso dal precedente box per marcare il cambio di tono (da serio a ironico). */
.disclaimer-banner {
    background: linear-gradient(135deg, var(--primary), var(--card-bg));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 50px;
    display: flex;
    align-items: center;
    gap: 40px;
    color: var(--text-main);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.disclaimer-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: var(--text-white);
}

.disclaimer-icon {
    font-size: 4rem;
    color: var(--text-white);
    flex-shrink: 0;
}

.disclaimer-text h2 {
    color: var(--text-white);
    font-size: 2rem;
    margin-bottom: 15px;
}

.disclaimer-text p {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Utility / Lab Section
   ───────────────────────────────────────────────────────────────
   Posizione nella pagina: DOPO la sezione #skills (Competenze),
   in accordo con l'ordine del menu: Chi Sono → Competenze → Utility → Contatti.
   Ultima modifica posizione: v3.2 (2026-02-28)

   Griglia di card per i micro-progetti del lab.
   Utility disponibili:
     • QR Creator      → utility/qrcode/       (HTML · JS · qrcodejs)
     • WebP Converter  → utility/img-converter/ (HTML · JS · Canvas API)

   Classi principali:
   - .utility-grid: usa auto-fill + minmax(320px, 1fr) → si adatta
     automaticamente al numero di card senza bisogno di modifiche CSS.
   - .utility-card: card cliccabile (tag <a>), con barra laterale
     colorata visibile solo all'hover (::before).
   - .utility-card--placeholder: variante tratteggiata per slot futuri.
   - .utility-tag: badge pill con il tech stack del progetto.

   Per aggiungere una nuova utility:
     1. Crea utility/<nome>/ con index.html, style.css, script.js
        (copia utility/img-converter/ come template: è il più aggiornato)
     2. Aggiungi una .utility-card nell'index.html del sito (vedi README)
     Non serve modificare questo CSS, la griglia si riadatta da sola.
*/
.utility {
    padding: 100px 0;
    background-color: var(--light-bg);
}

.utility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.utility-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--text-white);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    padding: 22px 24px;
    text-decoration: none;
    color: var(--text-dark);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.utility-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    opacity: 0;
    transition: var(--transition);
}

.utility-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(7, 111, 183, 0.12);
    border-color: var(--primary);
}

.utility-card:hover::before {
    opacity: 1;
}

.utility-card--placeholder {
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.12);
    background: var(--light-bg);
    cursor: default;
    opacity: 0.7;
}

.utility-card--placeholder:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

.utility-card--placeholder::before {
    display: none;
}

.utility-card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    transition: var(--transition);
    box-shadow: 0 6px 15px rgba(7, 111, 183, 0.25);
}

.utility-card--placeholder .utility-card-icon {
    background: linear-gradient(135deg, #999, #bbb);
    box-shadow: none;
}

.utility-card:hover .utility-card-icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 10px 25px rgba(7, 111, 183, 0.35);
}

.utility-card-body {
    flex: 1;
}

.utility-card-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.utility-card-body p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.5;
}

.utility-tag {
    display: inline-block;
    background: rgba(7, 111, 183, 0.08);
    color: var(--primary);
    border: 1px solid rgba(7, 111, 183, 0.2);
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.utility-card--placeholder .utility-tag {
    background: rgba(0, 0, 0, 0.05);
    color: #888;
    border-color: rgba(0, 0, 0, 0.1);
}

.utility-card-arrow {
    color: var(--primary);
    font-size: 1rem;
    opacity: 0;
    transition: var(--transition);
    flex-shrink: 0;
}

.utility-card:hover .utility-card-arrow {
    opacity: 1;
    transform: translate(3px, -3px);
}

/* Skills Section */
.skills {
    padding: 100px 0;
    background-color: var(--dark-bg);
    color: var(--text-main);
}

.skills .section-title p {
    color: #aaa;
}

.skills-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 900px;
    margin: 0 auto;
}

.skill-category h3 {
    color: var(--accent);
    margin-bottom: 25px;
    font-size: 1.5rem;
    border-bottom: 2px solid rgba(211, 181, 116, 0.2);
    padding-bottom: 10px;
    display: inline-block;
}

.skill-bar {
    margin-bottom: 20px;
}

.skill-name {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-white);
}

.progress-bg {
    width: 100%;
    height: 10px;
    background: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    width: 0;
    /* Animated via JS */
    border-radius: 10px;
    transition: width 1.5s ease-out;
}

/* Footer Logo */
.footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-white);
    margin-bottom: 40px;
    transition: var(--transition);
}

.footer-logo-img {
    height: 72px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: var(--transition);
    filter: drop-shadow(0 2px 10px rgba(7, 111, 183, 0.45));
}

.footer-logo:hover .footer-logo-img {
    transform: scale(1.1) rotate(-4deg);
    filter: drop-shadow(0 4px 16px rgba(7, 111, 183, 0.65));
}

.footer-logo-name {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-white);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.footer-logo-dot {
    color: var(--accent);
}

/* Footer / Contact */
footer {
    background-color: var(--card-bg);
    padding: 80px 0 40px;
    text-align: center;
    color: var(--text-main);
}

footer h2 {
    color: var(--text-white);
    font-size: 2.2rem;
    margin-bottom: 15px;
}

footer p {
    max-width: 900px;
    margin: 0 auto 40px;
    color: #aaa;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

/* 
   Le dimensioni delle social icon sono state raddoppiate per espresso volere, portando l'ingombro 
   da 50x50px a 100x100px, e i font a 3rem. 
   L'obiettivo è farle risaltare come elementi massicci alla fine della navigazione della pagina.
*/
.social-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--dark-bg);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.social-icon:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(7, 111, 183, 0.3);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    font-size: 0.9rem;
    color: #666;
}

.footer-bottom p {
    margin-bottom: 0;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right.appear {
    opacity: 1;
    transform: translateX(0);
}

/* Responsive */
@media (max-width: 992px) {
    .hero-content {
        flex-direction: column-reverse;
        text-align: center;
        padding-top: 50px;
    }

    .hero-text p {
        margin: 0 auto 30px;
    }

    .cta-group {
        justify-content: center;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .cert-banner,
    .disclaimer-banner {
        flex-direction: column;
        text-align: center;
        padding: 30px;
        gap: 20px;
    }

    .skills-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .utility-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 2.8rem;
    }

    .hero-text h2 {
        font-size: 1.5rem;
    }

    .image-wrapper {
        width: 300px;
        height: 300px;
    }

    .hamburger {
        display: block;
        font-size: 1.8rem;
        cursor: pointer;
        color: var(--text-white);
    }

    nav {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: rgba(13, 17, 23, 0.95);
        backdrop-filter: blur(15px);
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        z-index: 999;
    }

    nav.active {
        transform: translateY(0);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    nav ul {
        flex-direction: column;
        gap: 0;
        text-align: center;
        padding: 20px 0;
    }

    nav ul li {
        width: 100%;
    }

    nav ul li a {
        display: block;
        padding: 15px 0;
        font-size: 1.2rem;
        border-radius: 0;
    }

    .experience-badge {
        font-size: 0.8rem;
        padding: 8px 15px;
        bottom: 10px;
    }

    nav {
        flex-direction: column;
    }

    .lang-switcher {
        margin: 10px auto 20px auto;
        justify-content: center;
        margin-left: 0;
    }
}

/* Language Switcher */
html[lang="it"] .lang-en,
html[lang="en"] .lang-it {
    display: none !important;
}

nav {
    display: flex;
    align-items: center;
}

.lang-switcher {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-left: 30px;
}

.lang-btn {
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: var(--transition);
    width: 36px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.lang-btn svg {
    width: 28px;
    height: 18px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lang-btn.active,
.lang-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.lang-btn.active {
    border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════
   Contact Modal — v4.7
   Overlay + card centrata con animazione slideUpFade.
   z-index: 2000 per stare sopra l'header (z-index 1000).
   ═══════════════════════════════════════════════════ */

/* Footer "Contattami" button — stessa estetica dei social icon */
button.social-icon {
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    background-color: var(--dark-bg);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Overlay */
#contact-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}

#contact-modal.is-open {
    opacity: 1;
    pointer-events: all;
}

/* Card */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.contact-modal-box {
    background: var(--card-bg);
    border: 1px solid rgba(7, 111, 183, 0.3);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    animation: slideUpFade 0.35s ease both;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--dark-bg);
}

/* Header */
.contact-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 0;
    gap: 12px;
}

.contact-modal-header h3 {
    color: var(--text-white);
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-modal-header h3 i {
    color: var(--primary-light);
}

.contact-modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.contact-modal-close:hover {
    color: var(--text-white);
    transform: scale(1.2) rotate(90deg);
}

/* Body */
.contact-modal-body {
    padding: 24px 28px;
}

/* Form groups */
.cf-group {
    margin-bottom: 18px;
}

.cf-group label {
    display: block;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 7px;
    letter-spacing: 0.02em;
}

.cf-input {
    width: 100%;
    background: var(--dark-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--text-white);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    resize: none;
}

.cf-input::placeholder {
    color: #555;
}

.cf-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(7, 111, 183, 0.2);
}

.cf-input:invalid:not(:placeholder-shown) {
    border-color: #e05c5c;
    box-shadow: 0 0 0 3px rgba(224, 92, 92, 0.15);
}

/* Honeypot — assolutamente invisibile per l'utente */
.cf-honeypot {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Submit button */
.cf-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary);
    color: var(--text-white);
    border: none;
    border-radius: 50px;
    padding: 13px 28px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(7, 111, 183, 0.3);
    margin-top: 6px;
    width: 100%;
    justify-content: center;
}

.cf-submit-btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(7, 111, 183, 0.45);
}

.cf-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Success message */
.contact-success {
    text-align: center;
    padding: 20px 10px;
}

.contact-success-icon {
    font-size: 3.5rem;
    color: #4cad73;
    margin-bottom: 16px;
    animation: float 2.5s ease-in-out infinite;
}

.contact-success h4 {
    color: var(--text-white);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.contact-success p {
    color: var(--text-main);
    font-size: 0.98rem;
    margin-bottom: 8px;
}

.contact-success-sub {
    color: #666 !important;
    font-size: 0.85rem !important;
    margin-top: 12px !important;
}

/* Footer note */
.contact-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 28px;
    font-size: 0.78rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-modal-footer i {
    color: #444;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-modal-box {
        border-radius: 16px;
        max-height: 95vh;
    }

    .contact-modal-header,
    .contact-modal-body,
    .contact-modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ═══════════════════════════════════════════════════
   Social Icon Tooltips — v4.7
   Tooltip CSS puro tramite attributo data-tooltip.
   Appare sopra l'icona con fade + slide al hover.
   ═══════════════════════════════════════════════════ */

.social-icon[data-tooltip] {
    position: relative;
}

/* Bubble testo */
.social-icon[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: rgba(13, 17, 23, 0.95);
    color: var(--text-white);
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(211, 181, 116, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

/* Freccietta */
.social-icon[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    border: 5px solid transparent;
    border-top-color: rgba(13, 17, 23, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

/* Hover: mostra tooltip */
.social-icon[data-tooltip]:hover::before,
.social-icon[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}