NeonPulse | Agency WebMarketing, A by @Darkness977 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<select>Usato per creare un menu a tendina.
<abbr>Inserisce abbreviazioni e acronimi
<h6>Titolo di intestazione di sesto livello
minlengthDetermina il numero minimo di caratteri per un elemento input
<q>Indica una parte di testo come citazione breve

Users

Log in to search for users

Explore

Find inspiration

UX / Web Design, Freelance – Pro

Heads Or Tails Random Tally

tabella attività settimana piscina

Lezione 4 (terza parte)

Esercizi 05/03/2024 es3

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="NeonPulse Agency - Marketing, comunicazione, web design e AI generativa. Trasformiamo le tue idee in esperienze digitali uniche.">
    <meta name="keywords" content="agenzia di marketing, comunicazione, web design, AI generativa, digital agency, neon-tech, branding, social media marketing">
    <meta name="author" content="NeonPulse Agency">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.neonpulse.it/">
    <meta property="og:title" content="NeonPulse Agency - Marketing & Comunicazione Neon-Tech">
    <meta property="og:description" content="Trasformiamo le tue idee in esperienze digitali uniche con design innovativo e AI generativa.">
    <meta property="og:image" content="https://www.neonpulse.it/images/neonpulse-og-image.jpg">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://www.neonpulse.it/">
    <meta property="twitter:title" content="NeonPulse Agency - Marketing & Comunicazione Neon-Tech">
    <meta property="twitter:description" content="Trasformiamo le tue idee in esperienze digitali uniche con design innovativo e AI generativa.">
    <meta property="twitter:image" content="https://www.neonpulse.it/images/neonpulse-twitter-image.jpg">
    
    <!-- Schema.org structured data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ProfessionalService",
      "name": "NeonPulse Agency",
      "description": "Agenzia di marketing, comunicazione, web design e AI generativa",
      "url": "https://www.neonpulse.it/",
      "telephone": "+39 02 98765432",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Via Tech, 42",
        "addressLocality": "Milano",
        "postalCode": "20121",
        "addressCountry": "IT"
      },
      "image": [
        "https://www.neonpulse.it/images/agency-main.jpg"
       ],
      "sameAs": [
        "https://www.instagram.com/neonpulseagency",
        "https://www.linkedin.com/company/neonpulse"
      ]
    }
    </script>
    
    <title>NeonPulse Agency - Marketing & Comunicazione Neon-Tech</title>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
    <style>
        :root {
            --nero-opaco: rgba(10, 10, 20, 0.95);
            --blu-neon: #00d4ff;
            --viola-neon: #a855f7;
            --rosa-neon: #ff0080;
            --verde-neon: #39ff14;
            --bianco-opaco: rgba(255, 255, 255, 0.9);
            --testo-principale: #ffffff;
            --sfondo-sezione: #0a0a14;
            --gradient-bicolore: linear-gradient(90deg, #00d4ff, #a855f7);
            --gradient-tricolore: linear-gradient(90deg, #00d4ff, #a855f7, #ff0080);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Rajdhani', sans-serif;
            color: var(--testo-principale);
            line-height: 1.6;
            overflow-x: hidden;
            background-color: #0a0a14;
        }
        
        /* Loader */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--nero-opaco);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s, visibility 0.5s;
        }
        
        .loader.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .loader-content {
            text-align: center;
        }
        
        .loader-logo {
            font-family: 'Orbitron', sans-serif;
            font-size: 3rem;
            background: var(--gradient-tricolore);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
            letter-spacing: 2px;
            animation: pulse 1.5s infinite;
        }
        */*
        .loader-bar {
            width: 200px;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            overflow: hidden;
            margin: 0 auto;
        }
        
        .loader-progress {
            height: 100%;
            background: var(--gradient-tricolore);
            width: 0;
            animation: loading 2s ease-in-out forwards;
        }
        */
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        @keyframes loading {
            0% { width: 0; }
            100% { width: 100%; }
        }
        
        /* Header Styles */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: all 0.3s ease;
            background-color: transparent;
        }
        
        header.scrolled {
            background-color: var(--nero-opaco);
            box-shadow: 0 2px 20px rgba(0, 212, 255, 0.2);
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .logo {
            display: flex;
            align-items: center;
            font-family: 'Orbitron', sans-serif;
            font-size: 1.8rem;
            background: var(--gradient-tricolore);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-decoration: none;
            transition: transform 0.3s ease;
            letter-spacing: 1px;
        }
        
        .logo:hover {
            transform: scale(1.05);
        }
        
        .logo i {
            margin-right: 10px;
            font-size: 2rem;
            color: var(--blu-neon);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 2rem;
        }
        
        nav ul li a {
            color: var(--bianco-opaco);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease, transform 0.3s ease;
            position: relative;
        }
        
        nav ul li a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient-bicolore);
            transition: width 0.3s ease;
        }
        
        nav ul li a:hover {
            color: var(--blu-neon);
            transform: translateY(-2px);
        }
        
        nav ul li a:hover::after {
            width: 100%;
        }
        
        .menu-toggle {
            display: none;
            color: var(--bianco-opaco);
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(10, 10, 20, 0.7), rgba(10, 10, 20, 0.7)), url('https://picsum.photos/seed/neon-agency-hero/1920/1080.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
            animation: pulseGlow 4s infinite alternate;
        }
        
        @keyframes pulseGlow {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }
        
        .hero-content {
            max-width: 800px;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }
        
        .hero-date {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            color: var(--blu-neon);
            margin-bottom: 1rem;
            letter-spacing: 2px;
            animation: fadeInUp 1s ease;
        }
        
        .hero h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 4rem;
            margin-bottom: 1rem;
            background: var(--gradient-tricolore);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: none;
            letter-spacing: 3px;
            animation: fadeInUp 1s ease 0.2s both;
        }
        
        .hero p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            color: var(--bianco-opaco);
            animation: fadeInUp 1s ease 0.4s both;
        }
        
        .countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 2rem 0;
            animation: fadeInUp 1s ease 0.6s both;
        }
        
        .countdown-item {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 10px;
            padding: 15px;
            min-width: 80px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .countdown-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 212, 255, 0.2);
        }
        
        .countdown-number {
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            color: var(--blu-neon);
            display: block;
        }
        
        .countdown-label {
            font-size: 0.8rem;
            color: var(--bianco-opaco);
            text-transform: uppercase;
        }
        
        .btn {
            display: inline-block;
            padding: 15px 35px;
            background: var(--gradient-tricolore);
            color: var(--nero-opaco);
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--viola-neon);
            transition: left 0.3s ease;
            z-index: -1;
        }
        
        .btn:hover::before {
            left: 0;
        }
        
        .btn:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--blu-neon);
            border: 2px solid var(--blu-neon);
            margin-left: 1rem;
        }
        
        .btn-secondary::before {
            background: var(--blu-neon);
        }
        
        .btn-secondary:hover {
            color: var(--nero-opaco);
        }
        
        /* Section Styles */
        section {
            padding: 100px 0;
            position: relative;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 4rem;
        }
        
        .section-title h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 3.5rem;
            margin-bottom: 1rem;
            background: var(--gradient-bicolore);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 2px;
        }
        
        .section-title p {
            font-size: 1.2rem;
            color: var(--bianco-opaco);
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* Services Section */
        #servizi {
            background-color: var(--sfondo-sezione);
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .service-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .service-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
        }
        
        .service-card-img {
            height: 250px;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }
        
        .service-card-img::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(10, 10, 20, 0.7));
        }
        
        .service-card-content {
            padding: 30px;
        }
        
        .service-card-content .date {
            display: flex;
            align-items: center;
            color: var(--blu-neon);
            font-weight: 600;
            margin-bottom: 15px;
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            letter-spacing: 1px;
        }
        
        .service-card-content .date i {
            margin-right: 10px;
        }
        
        .service-card-content h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--viola-neon);
            letter-spacing: 1px;
        }
        
        .service-card-content p {
            margin-bottom: 20px;
            color: var(--bianco-opaco);
        }
        
        /* Team Section */
        #team {
            background-color: #0a0a14;
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }
        
        .team-card {
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .team-card:hover {
            transform: scale(1.05);
        }
        
        .team-img {
            width: 220px;
            height: 220px;
            border-radius: 50%;
            margin: 0 auto 25px;
            overflow: hidden;
            border: 4px solid var(--blu-neon);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
            position: relative;
        }
        
        .team-img::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
        }
        
        .team-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .team-card:hover .team-img img {
            transform: scale(1.1);
        }
        
        .team-card h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.8rem;
            margin-bottom: 10px;
            color: var(--blu-neon);
            letter-spacing: 1px;
        }
        
        .team-card p {
            color: var(--bianco-opaco);
            margin-bottom: 20px;
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            color: var(--blu-neon);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background: var(--blu-neon);
            color: var(--nero-opaco);
            transform: translateY(-3px);
        }
        
        /* Calendar Section */
        #calendario {
            background-color: var(--sfondo-sezione);
        }
        
        .calendar-container {
            max-width: 900px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 15px;
            overflow: hidden;
        }
        
        .calendar-header {
            background: var(--gradient-bicolore);
            color: var(--nero-opaco);
            padding: 25px;
            text-align: center;
        }
        
        .calendar-header h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 2rem;
            letter-spacing: 1px;
        }
        
        .calendar-body {
            padding: 30px;
        }
        
        .event-item {
            display: flex;
            padding: 25px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.3s ease;
        }
        
        .event-item:hover {
            transform: translateX(10px);
        }
        
        .event-item:last-child {
            border-bottom: none;
        }
        
        .event-date {
            flex: 0 0 100px;
            text-align: center;
            padding: 15px;
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            color: var(--blu-neon);
            border-radius: 10px;
            font-weight: 600;
            margin-right: 25px;
            font-family: 'Orbitron', sans-serif;
        }
        
        .event-date .day {
            font-size: 2rem;
            display: block;
        }
        
        .event-details {
            flex: 1;
        }
        
        .event-details h4 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: var(--viola-neon);
            letter-spacing: 1px;
        }
        
        .event-details p {
            color: var(--bianco-opaco);
            margin-bottom: 15px;
        }
        
        .event-details .btn {
            padding: 10px 25px;
            font-size: 0.9rem;
        }
        
        /* Blog & News Section */
        #blog {
            background-color: #0a0a14;
        }
        
        .blog-carousel {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
        }
        
        .blog-container {
            display: flex;
            transition: transform 0.5s ease;
        }
        
        .blog-item {
            min-width: 100%;
            padding: 0 15px;
        }
        
        .blog-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 15px;
            overflow: hidden;
            display: flex;
            height: 350px;
        }
        
        .blog-img {
            flex: 0 0 40%;
            background-size: cover;
            background-position: center;
        }
        
        .blog-content {
            flex: 1;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .blog-date {
            color: var(--blu-neon);
            font-family: 'Orbitron', sans-serif;
            font-size: 1.1rem;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }
        
        .blog-content h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--viola-neon);
            letter-spacing: 1px;
        }
        
        .blog-content p {
            color: var(--bianco-opaco);
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .blog-nav {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }
        
        .blog-nav-btn {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            color: var(--blu-neon);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .blog-nav-btn:hover {
            background: var(--blu-neon);
            color: var(--nero-opaco);
        }
        
        /* Social Media Section */
        #social {
            background-color: var(--sfondo-sezione);
        }
        
        .social-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .social-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .social-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
        }
        
        .social-card-img {
            height: 200px;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }
        
        .social-card-img::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(10, 10, 20, 0.7));
        }
        
        .social-card-content {
            padding: 25px;
        }
        
        .social-platform {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .social-platform i {
            font-size: 1.5rem;
            margin-right: 10px;
            color: var(--blu-neon);
        }
        
        .social-platform h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            color: var(--viola-neon);
            letter-spacing: 1px;
        }
        
        .social-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .tag {
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            color: var(--blu-neon);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
        }
        
        .social-card-content p {
            color: var(--bianco-opaco);
            margin-bottom: 15px;
        }
        
        /* FAQ Section */
        #faq {
            background-color: #0a0a14;
        }
        
        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .faq-item {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 15px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .faq-question {
            padding: 25px 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.3s ease;
        }
        
        .faq-question:hover {
            background: rgba(0, 212, 255, 0.1);
        }
        
        .faq-question h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            color: var(--blu-neon);
            letter-spacing: 1px;
        }
        
        .faq-toggle {
            font-size: 1.5rem;
            color: var(--blu-neon);
            transition: transform 0.3s ease;
        }
        
        .faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }
        
        .faq-item.active .faq-answer {
            max-height: 500px;
            padding: 0 30px 25px;
        }
        
        .faq-answer p {
            color: var(--bianco-opaco);
            line-height: 1.6;
        }
        
        /* Footer */
        footer {
            background-color: var(--nero-opaco);
            color: var(--bianco-opaco);
            padding: 70px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-section h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--blu-neon);
            letter-spacing: 1px;
        }
        
        .footer-section p, .footer-section li {
            margin-bottom: 10px;
            color: var(--bianco-opaco);
        }
        
        .footer-section ul {
            list-style: none;
        }
        
        .footer-section ul li {
            display: flex;
            align-items: center;
        }
        
        .footer-section ul li i {
            margin-right: 10px;
            color: var(--blu-neon);
        }
        
        .footer-section a {
            color: var(--bianco-opaco);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-section a:hover {
            color: var(--blu-neon);
        }
        
        .newsletter-form {
            display: flex;
            margin-top: 15px;
        }
        
        .newsletter-form input {
            flex: 1;
            padding: 12px;
            border: 1px solid rgba(0, 212, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px 0 0 5px;
            color: var(--bianco-opaco);
        }
        
        .newsletter-form button {
            padding: 12px 20px;
            background: var(--gradient-bicolore);
            color: var(--nero-opaco);
            border: none;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            transition: background 0.3s ease;
            font-weight: 600;
        }
        
        .newsletter-form button:hover {
            background: var(--viola-neon);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
        }
        
        .footer-bottom p {
            margin-bottom: 10px;
        }
        
        .footer-bottom .social-links {
            margin-top: 15px;
            justify-content: center;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Parallax Effect */
        .parallax {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        /* Responsive Styles */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 3rem;
            }
            
            .section-title h2 {
                font-size: 2.5rem;
            }
        }
        
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }
            
            nav {
                position: fixed;
                top: 70px;
                right: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background-color: var(--nero-opaco);
                transition: right 0.3s ease;
                padding: 20px;
            }
            
            nav.active {
                right: 0;
            }
            
            nav ul {
                flex-direction: column;
                height: 100%;
                justify-content: center;
                align-items: center;
            }
            
            nav ul li {
                margin: 15px 0;
            }
            
            nav ul li a {
                font-size: 1.5rem;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero p {
                font-size: 1.2rem;
            }
            
            .countdown {
                gap: 10px;
            }
            
            .countdown-item {
                min-width: 60px;
                padding: 10px;
            }
            
            .countdown-number {
                font-size: 1.8rem;
            }
            
            .btn-secondary {
                display: block;
                margin-left: 0;
                margin-top: 15px;
            }
            
            .event-item {
                flex-direction: column;
            }
            
            .event-date {
                margin-right: 0;
                margin-bottom: 15px;
                display: inline-block;
            }
            
            .blog-card {
                flex-direction: column;
                height: auto;
            }
            
            .blog-img {
                flex: none;
                height: 200px;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Loader -->
    <div class="loader" id="loader">
        <div class="loader-content">
            <div class="loader-logo">NEONPULSE</div>
            <div class="loader-bar">
                <div class="loader-progress"></div>
            </div>
        </div>
    </div>
    
    <!-- Header -->
    <header id="header">
        <div class="header-container">
            <a href="#" class="logo">
                <i class="fas fa-bolt"></i>
                NEONPULSE
            </a>
            <div class="menu-toggle" id="menuToggle">
                <i class="fas fa-bars"></i>
            </div>
            <nav id="nav">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#servizi">Servizi</a></li>
                    <li><a href="#team">Team</a></li>
                    <li><a href="#calendario">Calendario</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#social">Social</a></li>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="#contatti">Contatti</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="hero-content">
            <div class="hero-date">COMUNICAZIONE SUMMIT 2025</div>
            <h1>NEONPULSE AGENCY</h1>
            <p>Dove la creatività incontra la tecnologia per creare esperienze digitali indimenticabili</p>
            
            <div class="countdown" id="countdown">
                <div class="countdown-item">
                    <span class="countdown-number" id="days">00</span>
                    <span class="countdown-label">Giorni</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-number" id="hours">00</span>
                    <span class="countdown-label">Ore</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-number" id="minutes">00</span>
                    <span class="countdown-label">Minuti</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-number" id="seconds">00</span>
                    <span class="countdown-label">Secondi</span>
                </div>
            </div>
            
            <a href="#servizi" class="btn">Scopri i Nostri Servizi</a>
            <a href="#contatti" class="btn btn-secondary">Contattaci</a>
        </div>
    </section>
    
    <!-- Services Section -->
    <section id="servizi">
        <div class="container">
            <div class="section-title">
                <h2>SERVIZI</h2>
                <p>Offriamo soluzioni complete di marketing, comunicazione, web design e AI generativa per trasformare la tua visione in realtà digitale</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-card-img" style="background-image: url('https://picsum.photos/seed/marketing-service/600/400.jpg');"></div>
                    <div class="service-card-content">
                        <div class="date">
                            <i class="far fa-calendar"></i> 15 Marzo 2025
                        </div>
                        <h3>MARKETING STRATEGICO</h3>
                        <p>Creiamo campagne di marketing mirate che connettono il tuo brand con il pubblico giusto, utilizzando dati, analisi e approcci creativi per massimizzare il ROI.</p>
                        <a href="#" class="btn">Scopri di più</a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-card-img" style="background-image: url('https://picsum.photos/seed/web-design-service/600/400.jpg');"></div>
                    <div class="service-card-content">
                        <div class="date">
                            <i class="far fa-calendar"></i> 22 Marzo 2025
                        </div>
                        <h3>WEB DESIGN NEON-TECH</h3>
                        <p>Progettiamo siti web accattivanti con design all'avanguardia, animazioni fluide e interfacce intuitive che catturano l'attenzione e convertono visitatori in clienti.</p>
                        <a href="#" class="btn">Scopri di più</a>
                    </div>
                </div>
                <div class="service-card">
                    <div class="service-card-img" style="background-image: url('https://picsum.photos/seed/ai-service/600/400.jpg');"></div>
                    <div class="service-card-content">
                        <div class="date">
                            <i class="far fa-calendar"></i> 5 Aprile 2025
                        </div>
                        <h3>AI GENERATIVA</h3>
                        <p>Sfruttiamo il potere dell'intelligenza artificiale generativa per creare contenuti unici, immagini personalizzate e soluzioni innovative che distinguono il tuo brand dalla concorrenza.</p>
                        <a href="#" class="btn">Scopri di più</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Team Section -->
    <section id="team">
        <div class="container">
            <div class="section-title">
                <h2>TEAM</h2>
                <p>I nostri talentuosi professionisti che combinano creatività, tecnologia e strategia per deliver risultati eccezionali</p>
            </div>
            <div class="team-grid">
                <div class="team-card">
                    <div class="team-img">
                        <img src="https://picsum.photos/seed/team-member1/400/400.jpg" alt="Alex Neon">
                    </div>
                    <h3>Alex Neon</h3>
                    <p>Creative Director</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="team-card">
                    <div class="team-img">
                        <img src="https://picsum.photos/seed/team-member2/400/400.jpg" alt="Maya Digital">
                    </div>
                    <h3>Maya Digital</h3>
                    <p>AI Specialist</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-github"></i></a>
                    </div>
                </div>
                <div class="team-card">
                    <div class="team-img">
                        <img src="https://picsum.photos/seed/team-member3/400/400.jpg" alt="Leo Code">
                    </div>
                    <h3>Leo Code</h3>
                    <p>Lead Developer</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-github"></i></a>
                        <a href="#"><i class="fab fa-codepen"></i></a>
                    </div>
                </div>
                <div class="team-card">
                    <div class="team-img">
                        <img src="https://picsum.photos/seed/team-member4/400/400.jpg" alt="Sara Pixel">
                    </div>
                    <h3>Sara Pixel</h3>
                    <p>UX/UI Designer</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-dribbble"></i></a>
                        <a href="#"><i class="fab fa-behance"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Calendar Section -->
    <section id="calendario">
        <div class="container">
            <div class="section-title">
                <h2>CALENDARIO EVENTI</h2>
                <p>Non perderti i nostri eventi di comunicazione e marketing digitale. Partecipa per scoprire le ultime tendenze e tecnologie</p>
            </div>
            <div class="calendar-container">
                <div class="calendar-header">
                    <h3>EVENTI 2025 - COMUNICAZIONE & MARKETING</h3>
                </div>
                <div class="calendar-body">
                    <div class="event-item">
                        <div class="event-date">
                            <span class="day">15</span>
                            <span>MAR</span>
                        </div>
                        <div class="event-details">
                            <h4>Marketing Summit</h4>
                            <p><i class="far fa-clock"></i> 09:00 - 18:00 | <i class="fas fa-map-marker-alt"></i> Milano Convention Center</p>
                            <p>Un'intera giornata dedicata alle strategie di marketing più innovative con speaker internazionali e workshop pratici.</p>
                            <a href="#" class="btn">Dettagli</a>
                        </div>
                    </div>
                    <div class="event-item">
                        <div class="event-date">
                            <span class="day">22</span>
                            <span>APR</span>
                        </div>
                        <div class="event-details">
                            <h4>AI & Creativity Workshop</h4>
                            <p><i class="far fa-clock"></i> 14:00 - 19:00 | <i class="fas fa-map-marker-alt"></i> NeonPulse HQ</p>
                            <p>Scopri come l'intelligenza artificiale sta trasformando il settore creativo e come applicarla ai tuoi progetti.</p>
                            <a href="#" class="btn">Dettagli</a>
                        </div>
                    </div>
                    <div class="event-item">
                        <div class="event-date">
                            <span class="day">10</span>
                            <span>MAG</span>
                        </div>
                        <div class="event-details">
                            <h4>Digital Experience Conference</h4>
                            <p><i class="far fa-clock"></i> 09:00 - 20:00 | <i class="fas fa-map-marker-alt"></i> Rome Tech Hub</p>
                            <p>Esplora il futuro delle esperienze digitali, dal web design immersivo alle interfacce conversazionali.</p>
                            <a href="#" class="btn">Dettagli</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Blog & News Section -->
    <section id="blog">
        <div class="container">
            <div class="section-title">
                <h2>BLOG & NEWS</h2>
                <p>Resta aggiornato sulle ultime tendenze del marketing, comunicazione e tecnologia con i nostri articoli esclusivi</p>
            </div>
            <div class="blog-carousel">
                <div class="blog-container" id="blogContainer">
                    <div class="blog-item">
                        <div class="blog-card">
                            <div class="blog-img" style="background-image: url('https://picsum.photos/seed/blog1/600/400.jpg');"></div>
                            <div class="blog-content">
                                <div class="blog-date">10 FEBBRAIO 2025</div>
                                <h3>L'evoluzione del branding nell'era digitale</h3>
                                <p>Scopri come i brand più innovativi stanno utilizzando tecnologie emergenti come AR, VR e AI per creare esperienze memorabili che connettono emotivamente con i consumatori.</p>
                                <a href="#" class="btn">Leggi di più</a>
                            </div>
                        </div>
                    </div>
                    <div class="blog-item">
                        <div class="blog-card">
                            <div class="blog-img" style="background-image: url('https://picsum.photos/seed/blog2/600/400.jpg');"></div>
                            <div class="blog-content">
                                <div class="blog-date">25 GENNAIO 2025</div>
                                <h3>Neon-Tech: il futuro del web design</h3>
                                <p>Esplora le tendenze che definiranno il web design del futuro: dal neon-morphism alle interfacce adattive, scopri come creare siti che catturano l'attenzione e guidano l'utente in un'esperienza immersiva.</p>
                                <a href="#" class="btn">Leggi di più</a>
                            </div>
                        </div>
                    </div>
                    <div class="blog-item">
                        <div class="blog-card">
                            <div class="blog-img" style="background-image: url('https://picsum.photos/seed/blog3/600/400.jpg');"></div>
                            <div class="blog-content">
                                <div class="blog-date">12 GENNAIO 2025</div>
                                <h3>AI generativa: rivoluzione o minaccia per i creativi?</h3>
                                <p>Un'analisi approfondita su come l'intelligenza artificiale generativa sta trasformando il settore creativo, le opportunità che offre e le sfide etiche che presenta.</p>
                                <a href="#" class="btn">Leggi di più</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="blog-nav">
                <div class="blog-nav-btn" id="prevBlog">
                    <i class="fas fa-chevron-left"></i>
                </div>
                <div class="blog-nav-btn" id="nextBlog">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Social Media Section -->
    <section id="social">
        <div class="container">
            <div class="section-title">
                <h2>SOCIAL MEDIA</h2>
                <p>Scopri le nostre campagne più innovative e i risultati che abbiamo ottenuto per i nostri clienti sui principali social media</p>
            </div>
            <div class="social-grid">
                <div class="social-card">
                    <div class="social-card-img" style="background-image: url('https://picsum.photos/seed/social1/600/400.jpg');"></div>
                    <div class="social-card-content">
                        <div class="social-platform">
                            <i class="fab fa-instagram"></i>
                            <h3>Instagram Campaign</h3>
                        </div>
                        <div class="social-tags">
                            <span class="tag">#NeonAesthetics</span>
                            <span class="tag">#VisualStorytelling</span>
                            <span class="tag">#BrandIdentity</span>
                        </div>
                        <p>Campagna visiva per un brand di moda che ha generato 2.5M di impression e un engagement rate del 8.7% attraverso contenuti immersivi e filtri AR personalizzati.</p>
                        <a href="#" class="btn">Vedi Campagna</a>
                    </div>
                </div>
                <div class="social-card">
                    <div class="social-card-img" style="background-image: url('https://picsum.photos/seed/social2/600/400.jpg');"></div>
                    <div class="social-card-content">
                        <div class="social-platform">
                            <i class="fab fa-tiktok"></i>
                            <h3>TikTok Challenge</h3>
                        </div>
                        <div class="social-tags">
                            <span class="tag">#ViralContent</span>
                            <span class="tag">#UserGenerated</span>
                            <span class="tag">#BrandChallenge</span>
                        </div>
                        <p>Challenge virale per un beverage brand che ha superato 15M di visualizzazioni e generato oltre 50K contenuti creati dagli utenti in sole 72 ore.</p>
                        <a href="#" class="btn">Vedi Campagna</a>
                    </div>
                </div>
                <div class="social-card">
                    <div class="social-card-img" style="background-image: url('https://picsum.photos/seed/social3/600/400.jpg');"></div>
                    <div class="social-card-content">
                        <div class="social-platform">
                            <i class="fab fa-linkedin"></i>
                            <h3>LinkedIn Strategy</h3>
                        </div>
                        <div class="social-tags">
                            <span class="tag">#B2BMarketing</span>
                            <span class="tag">#ThoughtLeadership</span>
                            <span class="tag">#ContentStrategy</span>
                        </div>
                        <p>Strategia di content marketing per un'azienda tech che ha aumentato le lead qualificate del 65% e posizionato il CEO come thought leader nel settore.</p>
                        <a href="#" class="btn">Vedi Campagna</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- FAQ Section -->
    <section id="faq">
        <div class="container">
            <div class="section-title">
                <h2>DOMANDE FREQUENTI</h2>
                <p>Tutto quello che devi sapere sui nostri servizi e come possiamo aiutare il tuo business a crescere</p>
            </div>
            <div class="faq-container">
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Quali servizi offrite esattamente?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Offriamo un'ampia gamma di servizi di marketing e comunicazione, tra cui strategie di marketing digitale, web design e sviluppo, content creation, social media management, campagne pubblicitarie, consulenza di branding e soluzioni basate su AI generativa per personalizzare e ottimizzare le tue campagne.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Quanto tempo richiede un progetto web design?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>I tempi variano in base alla complessità del progetto. Un sito web vetrina standard richiede generalmente 4-6 settimane, mentre progetti più complessi come e-commerce o web application possono richiedere 8-12 settimane o più. Forniamo sempre una timeline dettagliata prima di iniziare il lavoro.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Lavorate con clienti di settori specifici?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Abbiamo esperienza in diversi settori, dalla tecnologia alla moda, dal food & beverage al B2B. Il nostro approccio è flessibile e ci adattiamo alle esigenze specifiche di ogni settore, creando strategie personalizzate che tengono conto delle peculiarità del tuo mercato di riferimento.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Come integrate l'AI generativa nei vostri servizi?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Utilizziamo l'AI generativa in molteplici modi: per creare contenuti testuali e visivi personalizzati, per ottimizzare le campagne pubblicitarie attraverso analisi predittiva, per personalizzare l'esperienza utente sui siti web e per automatizzare processi creativi ripetitivi, permettendo al nostro team di concentrarsi sulla strategia e l'innovazione.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Qual è il vostro approccio al marketing digitale?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Il nostro approccio è data-driven ma fortemente orientato alla creatività. Iniziamo sempre con un'analisi approfondita del tuo business, dei tuoi obiettivi e del tuo pubblico. Sviluppiamo quindi una strategia personalizzata che combina canali diversi, contenuti di qualità e tecnologie innovative per massimizzare il ROI e costruire relazioni durature con i tuoi clienti.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Offrite supporto dopo il lancio di un progetto?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, offriamo diversi livelli di supporto post-lancio, dal monitoraggio delle performance all'aggiornamento dei contenuti, dall'ottimizzazione SEO alla manutenzione tecnica. Crediamo che il lancio sia solo l'inizio di una partnership continua per garantire che il tuo progetto continui a evolversi e a generare risultati nel tempo.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Come misurate il successo delle vostre campagne?</h3>
                        <span class="faq-toggle">+</span>
                    </div>
                    <div class="faq-answer">
                        <p>Utilizziamo una combinazione di KPI quantitativi e qualitativi, tra cui tassi di conversione, engagement, ROI, reach e impression, ma anche metriche più avanzate come il sentiment analysis, il customer lifetime value e l'attribuzione multi-touch. Forniamo report regolari e trasparenti per mostrarti esattamente come i nostri sforzi stanno contribuendo ai tuoi obiettivi di business.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer id="contatti">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>CONTATTI</h3>
                    <ul>
                        <li><i class="fas fa-map-marker-alt"></i> Via Tech, 42 - 20121 Milano</li>
                        <li><i class="fas fa-phone"></i> +39 02 98765432</li>
                        <li><i class="fas fa-envelope"></i> info@neonpulse.it</li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>SERVIZI</h3>
                    <ul>
                        <li><a href="#">Marketing Strategico</a></li>
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">AI Generativa</a></li>
                        <li><a href="#">Social Media</a></li>
                        <li><a href="#">Branding</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>NEWSLETTER</h3>
                    <p>Iscriviti alla nostra newsletter per ricevere le ultime novità su marketing, tecnologia e design.</p>
                    <form class="newsletter-form">
                        <input type="email" placeholder="La tua email">
                        <button type="submit">Iscriviti</button>
                    </form>
                </div>
                <div class="footer-section">
                    <h3>SEGUICI</h3>
                    <p>Resta connesso con noi sui social media per aggiornamenti quotidiani e contenuti esclusivi.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 NeonPulse Agency. Tutti i diritti riservati.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
        </div>
    </footer>
    
    <script>
        // Loader
        window.addEventListener('load', function() {
            setTimeout(function() {
                document.getElementById('loader').classList.add('hidden');
            }, 2000);
        });
        
        // Countdown Timer
        function updateCountdown() {
            const eventDate = new Date('March 15, 2025 09:00:00').getTime();
            const now = new Date().getTime();
            const distance = eventDate - now;
            
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            
            document.getElementById('days').innerText = days.toString().padStart(2, '0');
            document.getElementById('hours').innerText = hours.toString().padStart(2, '0');
            document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0');
            document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0');
            
            if (distance < 0) {
                document.getElementById('countdown').innerHTML = '<h2>L'evento è iniziato!</h2>';
            }
        }
        
        setInterval(updateCountdown, 1000);
        updateCountdown();
        
        // Sticky header effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Mobile menu toggle
        document.getElementById('menuToggle').addEventListener('click', function() {
            document.getElementById('nav').classList.toggle('active');
            this.innerHTML = document.getElementById('nav').classList.contains('active') 
                ? '<i class="fas fa-times"></i>' 
                : '<i class="fas fa-bars"></i>';
        });
        
        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                // Close mobile menu if open
                document.getElementById('nav').classList.remove('active');
                document.getElementById('menuToggle').innerHTML = '<i class="fas fa-bars"></i>';
                
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    window.scrollTo({
                        top: target.offsetTop - 70,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Blog Carousel
        let currentBlog = 0;
        const blogItems = document.querySelectorAll('.blog-item');
        const totalBlogs = blogItems.length;
        const blogContainer = document.getElementById('blogContainer');
        
        function showBlog(index) {
            if (index < 0) {
                currentBlog = totalBlogs - 1;
            } else if (index >= totalBlogs) {
                currentBlog = 0;
            } else {
                currentBlog = index;
            }
            
            blogContainer.style.transform = `translateX(-${currentBlog * 100}%)`;
        }
        
        document.getElementById('prevBlog').addEventListener('click', () => {
            showBlog(currentBlog - 1);
        });
        
        document.getElementById('nextBlog').addEventListener('click', () => {
            showBlog(currentBlog + 1);
        });
        
        // Auto-rotate blog carousel
        setInterval(() => {
            showBlog(currentBlog + 1);
        }, 5000);
        
        // FAQ Accordion
        const faqItems = document.querySelectorAll('.faq-item');
        
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            
            question.addEventListener('click', () => {
                // Close all other items
                faqItems.forEach(otherItem => {
                    if (otherItem !== item) {
                        otherItem.classList.remove('active');
                    }
                });
                
                // Toggle current item
                item.classList.toggle('active');
            });
        });
        
        // Parallax effect
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const parallaxElements = document.querySelectorAll('.hero');
            
            parallaxElements.forEach(element => {
                const speed = 0.5;
                element.style.transform = `translateY(${scrolled * speed}px)`;
            });
        });
        
        // Add animation on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };
        
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.animation = 'fadeInUp 0.8s ease forwards';
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);
        
        // Observe all cards
        document.querySelectorAll('.service-card, .team-card, .event-item, .social-card, .faq-item').forEach(card => {
            card.style.opacity = '0';
            observer.observe(card);
        });
    </script>
</body>
</html>