Éclat Couture - Alta Moda Artigia by @Darkness977 - Codewith.it

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

Referenze

colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
application-x-www-form-urlencodedCodifica dei caratteri di un form
animationDefinisce i parametri dell'animazione di un elemento o selettore
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<td>Definisce una cella di una tabella HTML.
minImposta il valore numerico o temporale minimo per un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

navbar responsive

Esercizi 05/03/2024 es4

Il Giro del Mondo in 80 Giorni(2)

esercitazione8.html

Tabella base (lezione 10)

Pagina prova html Marianna

Heads Or Tails Random Tally

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Éclat Couture - Alta Moda Artigianale</title>
    <meta name="description" content="Scopri le collezioni 2024 e 2025 di Éclat Couture. Capolavori di sartoria artigianale, creati con passione e maestria italiana.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Reset e Stili Globali */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #1a1a1a;
            --secondary-color: #d4af37;
            --accent-color: #f5f5f5;
            --text-color: #333;
            --light-text: #f5f5f5;
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="black" stroke-width="1"/></svg>'), auto;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 600;
            margin-bottom: 1rem;
        }

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

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .container {
            width: 90%;
            max-width: 800px; /* Ridotto per leggibilità post */
            margin: 0 auto;
            padding: 0 15px;
        }

        /* Header Dinamico */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 0;
            transition: var(--transition);
            background-color: transparent;
        }

        header.scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 15px 0;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .logo {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--primary-color);
        }

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

        nav ul li {
            margin-left: 30px;
        }

        nav ul li a {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            padding-bottom: 5px;
        }

        nav ul li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background-color: var(--secondary-color);
            transition: var(--transition);
        }

        nav ul li a:hover::after {
            width: 100%;
        }

        .menu-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
            z-index: -1;
        }

        .hero-content {
            text-align: center;
            color: var(--light-text);
            padding: 2rem;
            max-width: 800px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1.5s forwards;
            animation-delay: 0.5s;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            letter-spacing: 2px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1.5s forwards;
            animation-delay: 0.7s;
        }

        .hero-quote {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            font-style: italic;
            margin-bottom: 2rem;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1.5s forwards;
            animation-delay: 0.9s;
        }

        .hero-cta {
            display: inline-block;
            padding: 12px 30px;
            background-color: transparent;
            border: 1px solid var(--light-text);
            color: var(--light-text);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
            transition: var(--transition);
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1.5s forwards;
            animation-delay: 1.1s;
        }

        .hero-cta:hover {
            background-color: var(--light-text);
            color: var(--primary-color);
        }

        /* Sezioni */
        section {
            padding: 100px 0;
        }

        .section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 3rem;
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 2px;
            background-color: var(--secondary-color);
        }

        /* NUOVA SEZIONE: STORIA E PRODUZIONE */
        .about-brand {
            background-color: #fafafa;
        }
        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            margin-top: 60px;
        }
        .about-card {
            text-align: center;
            padding: 40px 30px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: var(--transition);
        }
        .about-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .about-card-icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 20px;
        }
        .about-card h3 {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        .about-card p {
            line-height: 1.7;
            color: #555;
        }

        /* Collezioni */
        .collections {
            background-color: var(--accent-color);
        }

        .collection-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 3rem;
        }

        .tab-btn {
            background: none;
            border: none;
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            margin: 0 15px;
            padding: 10px 0;
            cursor: pointer;
            position: relative;
            color: var(--text-color);
            transition: var(--transition);
        }

        .tab-btn.active {
            color: var(--secondary-color);
        }

        .tab-btn::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--secondary-color);
            transform: scaleX(0);
            transition: var(--transition);
        }

        .tab-btn.active::after {
            transform: scaleX(1);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .collection-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .collection-card {
            position: relative;
            overflow: hidden;
            height: 400px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
        }

        .collection-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .collection-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .collection-card:hover img {
            transform: scale(1.05);
            filter: brightness(0.8);
        }

        .collection-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: var(--light-text);
            transform: translateY(100%);
            transition: var(--transition);
        }

        .collection-card:hover .collection-overlay {
            transform: translateY(0);
        }

        .collection-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.8rem;
            margin-bottom: 5px;
        }

        .collection-price {
            font-size: 0.9rem;
            font-style: italic;
        }

        /* Sartoria */
        .craftsmanship {
            background-color: #fff;
        }

        .craftsmanship-intro {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 60px;
            font-size: 1.1rem;
            line-height: 1.8;
        }

        .craftsmanship-sections {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-bottom: 80px;
        }

        .craftsmanship-card {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: var(--transition);
        }

        .craftsmanship-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
        }

        .craftsmanship-img {
            height: 250px;
            overflow: hidden;
        }

        .craftsmanship-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .craftsmanship-card:hover .craftsmanship-img img {
            transform: scale(1.05);
        }

        .craftsmanship-content {
            padding: 30px;
            background-color: #fff;
        }

        .craftsmanship-content h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--primary-color);
        }

        .craftsmanship-content p {
            margin-bottom: 0;
            line-height: 1.7;
        }

        /* NUOVA SEZIONE TIMELINE DI IMPATTO */
        .process-timeline {
            position: relative;
            width: 100%;
            padding: 80px 0;
            background-color: var(--primary-color);
            color: var(--light-text);
            overflow: hidden;
        }

        .process-timeline .section-title {
            color: var(--light-text);
        }
        .process-timeline .section-title::after {
            background-color: var(--secondary-color);
        }

        .timeline-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-auto-rows: 400px;
            gap: 20px;
            margin-top: 60px;
        }

        .timeline-item {
            position: relative;
            background-color: #222;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            transition: var(--transition);
        }

        .timeline-item:nth-child(odd) {
            grid-row: span 2;
        }

        .timeline-item:hover {
            transform: scale(1.02);
            box-shadow: 0 15px 40px rgba(0,0,0,0.4);
        }

        .timeline-item-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.6;
            transition: var(--transition);
        }

        .timeline-item:hover .timeline-item-bg {
            opacity: 0.8;
            transform: scale(1.1);
        }

        .timeline-item-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.4));
        }

        .timeline-item-number {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 5rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.1);
            line-height: 1;
        }

        .timeline-item-content {
            position: relative;
            z-index: 2;
            padding: 30px;
        }

        .timeline-item-content h3 {
            font-size: 2rem;
            margin-bottom: 10px;
            color: var(--secondary-color);
        }

        .timeline-item-content p {
            font-size: 1rem;
            line-height: 1.6;
        }
        
        /* Eventi con NUOVO LAYOUT */
        .events {
            background-color: var(--accent-color);
        }

        .events-feed {
            margin-top: 50px;
        }

        .event-post {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            padding: 30px;
            margin-bottom: 30px;
            border-left: 5px solid var(--secondary-color);
            transition: var(--transition);
        }

        .event-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .event-post-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .event-post-title {
            font-size: 2rem;
            color: var(--primary-color);
            margin: 0;
        }

        .event-label {
            background-color: var(--secondary-color);
            color: var(--primary-color);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .event-post-meta {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 15px;
            font-size: 0.9rem;
            color: #666;
        }

        .event-post-meta span {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .event-post-body p {
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .event-post-footer {
            text-align: right;
        }

        .event-cta {
            display: inline-block;
            padding: 10px 20px;
            background-color: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.8rem;
            transition: var(--transition);
        }

        .event-cta:hover {
            background-color: var(--primary-color);
            color: white;
        }

        /* FAQ */
        .faq {
            background-color: white;
        }

        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;
        }

        .faq-question {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            margin-bottom: 10px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }

        .faq-question:hover {
            color: var(--secondary-color);
        }

        .faq-question i {
            transition: var(--transition);
        }

        .faq-question.active i {
            transform: rotate(180deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .faq-answer.show {
            max-height: 500px;
        }

        /* Footer */
        footer {
            background-color: var(--primary-color);
            color: var(--light-text);
            padding: 50px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-column h3 {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--secondary-color);
        }

        .footer-column p, .footer-column li {
            margin-bottom: 10px;
            font-size: 0.9rem;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li a {
            transition: var(--transition);
        }

        .footer-column ul li a:hover {
            color: var(--secondary-color);
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            transition: var(--transition);
        }

        .social-links a:hover {
            background-color: var(--secondary-color);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
        }

        /* NUOVA FASCIA DI MARKETING */
        .marketing-banner {
            background: linear-gradient(135deg, #1a1a1a, #333);
            color: var(--light-text);
            padding: 40px 20px;
            text-align: center;
        }
        .marketing-banner .container {
            max-width: 800px;
        }
        .marketing-banner h2 {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }
        .marketing-banner p {
            font-size: 1.1rem;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        .marketing-ctas {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .marketing-ctas input[type="email"] {
            padding: 12px 20px;
            border: 1px solid rgba(255,255,255,0.3);
            background: rgba(255,255,255,0.1);
            color: white;
            border-radius: 4px;
            font-size: 1rem;
            width: 100%;
            max-width: 300px;
        }
        .marketing-ctas input[type="email"]::placeholder {
            color: rgba(255,255,255,0.7);
        }
        .marketing-ctas .btn-cta {
            padding: 12px 30px;
            background-color: var(--secondary-color);
            color: var(--primary-color);
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: var(--transition);
        }
        .marketing-ctas .btn-cta:hover {
            background-color: #b8941f;
            transform: translateY(-3px);
        }
        .marketing-ctas .btn-cta.secondary {
            background-color: transparent;
            border: 1px solid var(--secondary-color);
            color: var(--secondary-color);
        }
        .marketing-ctas .btn-cta.secondary:hover {
            background-color: var(--secondary-color);
            color: var(--primary-color);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 3rem;
            }
            .timeline-grid {
                grid-auto-rows: 300px;
            }
            .timeline-item:nth-child(odd) {
                grid-row: span 1;
            }
        }

        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }
            
            nav {
                position: fixed;
                top: 0;
                right: -100%;
                width: 70%;
                height: 100vh;
                background-color: white;
                padding: 80px 30px;
                transition: var(--transition);
                box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            }
            
            nav.active {
                right: 0;
            }
            
            nav ul {
                flex-direction: column;
            }
            
            nav ul li {
                margin: 15px 0;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero-quote {
                font-size: 1.2rem;
            }
            
            .section-title {
                font-size: 2.5rem;
            }
            
            .collection-tabs {
                flex-direction: column;
                align-items: center;
            }
            
            .tab-btn {
                margin: 5px 0;
            }
            
            .event-post-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .marketing-ctas {
                flex-direction: column;
                align-items: center;
            }
            .marketing-ctas input[type="email"] {
                max-width: 100%;
            }
        }

        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .collection-grid {
                grid-template-columns: 1fr;
            }
            
            .craftsmanship-sections {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header id="header">
        <div class="header-content">
            <div class="logo">Éclat Couture</div>
            <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="#about">Chi Siamo</a></li>
                    <li><a href="#collections">Collezioni</a></li>
                    <li><a href="#craftsmanship">Sartoria</a></li>
                    <li><a href="#events">Eventi</a></li>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="#contact">Contatti</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <video class="hero-video" autoplay muted loop>
            <source src="https://assets.mixkit.co/videos/preview/mixkit-fashion-model-with-a-yellow-jacket-posing-39880-large.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <h1>Éclat Couture</h1>
            <p class="hero-quote">"La moda è l'armatura per sopravvivere alla realtà di tutti i giorni." - Bill Cunningham</p>
            <a href="#collections" class="hero-cta">Scopri le Collezioni</a>
        </div>
    </section>

    <!-- NUOVA SEZIONE: STORIA E PRODUZIONE -->
    <section class="about-brand" id="about">
        <div class="container">
            <h2 class="section-title">La Nostra Essenza</h2>
            <div class="about-grid">
                <div class="about-card">
                    <div class="about-card-icon">
                        <i class="fas fa-feather-alt"></i>
                    </div>
                    <h3>La Nascita del Brand</h3>
                    <p>Fondata a Milano nel 2004 dalla visionaria designer Elena Vescovi, Éclat Couture nasce dal desiderio di riportare la moda alla sua forma più pura: l'arte sartoriale. Un sogno diventato realtà, dove ogni creazione è un capitolo di una storia di passione e bellezza senza tempo.</p>
                </div>
                <div class="about-card">
                    <div class="about-card-icon">
                        <i class="fas fa-hand-holding-heart"></i>
                    </div>
                    <h3>Produzione Artigianale</h3>
                    <p>In un'epoca di omologazione industriale, noi scegliamo la lentezza. Ogni capo è interamente realizzato a mano nel nostro atelier milanese. Dalla scelta del filo all'ultimo ricamo, le mani delle nostre artigiane infondono anima e vita in ogni tessuto, garantendo un pezzo unico e irripetibile.</p>
                </div>
                <div class="about-card">
                    <div class="about-card-icon">
                        <i class="fas fa-gem"></i>
                    </div>
                    <h3>L'Esperienza della Sartoria</h3>
                    <p>Vestire Éclat Couture non è un acquisto, è un'esperienza. Dalla consulenza privata alla prova finale, ti guidiamo in un percorso personale per creare un capo che non solo ti calza a pennello, ma racconta chi sei. È l'eleganza che diventa una seconda pelle.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Collezioni Section -->
    <section class="collections" id="collections">
        <div class="container">
            <h2 class="section-title">Le Nostre Collezioni</h2>
            
            <div class="collection-tabs">
                <button class="tab-btn active" data-tab="2024">Collezione 2024</button>
                <button class="tab-btn" data-tab="2025">Collezione 2025</button>
            </div>
            
            <div class="tab-content active" id="2024">
                <div class="collection-grid">
                    <div class="collection-card">
                        <img src="https://picsum.photos/seed/fashion1/600/800.jpg" alt="Abito da sera in seta">
                        <div class="collection-overlay">
                            <h3 class="collection-title">Aurora</h3>
                            <p class="collection-price">Prezzo su richiesta</p>
                        </div>
                    </div>
                    <div class="collection-card">
                        <img src="https://picsum.photos/seed/fashion2/600/800.jpg" alt="Abito da giorno in lino">
                        <div class="collection-overlay">
                            <h3 class="collection-title">Eterea</h3>
                            <p class="collection-price">Prezzo su richiesta</p>
                        </div>
                    </div>
                    <div class="collection-card">
                        <img src="https://picsum.photos/seed/fashion3/600/800.jpg" alt="Abito da cerimonia in pizzo">
                        <div class="collection-overlay">
                            <h3 class="collection-title">Celestiale</h3>
                            <p class="collection-price">Prezzo su richiesta</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="tab-content" id="2025">
                <div class="collection-grid">
                    <div class="collection-card">
                        <img src="https://picsum.photos/seed/fashion4/600/800.jpg" alt="Abito da sera in organza">
                        <div class="collection-overlay">
                            <h3 class="collection-title">Notturna</h3>
                            <p class="collection-price">Prezzo su richiesta</p>
                        </div>
                    </div>
                    <div class="collection-card">
                        <img src="https://picsum.photos/seed/fashion5/600/800.jpg" alt="Abito da giorno in cotone">
                        <div class="collection-overlay">
                            <h3 class="collection-title">Solare</h3>
                            <p class="collection-price">Prezzo su richiesta</p>
                        </div>
                    </div>
                    <div class="collection-card">
                        <img src="https://picsum.photos/seed/fashion6/600/800.jpg" alt="Abito da cerimonia in chiffon">
                        <div class="collection-overlay">
                            <h3 class="collection-title">Lunare</h3>
                            <p class="collection-price">Prezzo su richiesta</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Sartoria Section -->
    <section class="craftsmanship" id="craftsmanship">
        <div class="container">
            <h2 class="section-title">L'Arte della Sartoria</h2>
            
            <p class="craftsmanship-intro">
                In un mondo dominato dalla produzione di massa, Éclat Couture celebra l'arte millenaria della sartoria italiana. 
                Ogni capo che esce dal nostro atelier è il risultato di un percorso creativo che unisce tradizione e innovazione, 
                tecnica e passione, per creare capolavori unici che esaltano la bellezza di chi li indossa.
            </p>
            
            <div class="craftsmanship-sections">
                <div class="craftsmanship-card">
                    <div class="craftsmanship-img">
                        <img src="https://picsum.photos/seed/artisanship/600/400.jpg" alt="L'arte della sartoria">
                    </div>
                    <div class="craftsmanship-content">
                        <h3>L'Arte della Sartoria</h3>
                        <p>
                            La nostra sartoria è un tempio dove le mani esperte delle nostre artigiane trasformano tessuti pregiati 
                            in opere d'arte indossabili. Ogni punto è una promessa di qualità, ogni cucitura un segno distintivo 
                            di eccellenza.
                        </p>
                    </div>
                </div>
                
                <div class="craftsmanship-card">
                    <div class="craftsmanship-img">
                        <img src="https://picsum.photos/seed/fabrics/600/400.jpg" alt="Tessuti e filati pregiati">
                    </div>
                    <div class="craftsmanship-content">
                        <h3>Tessuti e Filati Pregiati</h3>
                        <p>
                            Selezioniamo solo materiali eccezionali provenienti dalle migliori filature. Sete di Como, cachemire mongolo, 
                            lane merino extrafine: ogni tessuto è scelto per la sua qualità intrinseca.
                        </p>
                    </div>
                </div>
                
                <div class="craftsmanship-card">
                    <div class="craftsmanship-img">
                        <img src="https://picsum.photos/seed/selection/600/400.jpg" alt="Selezione dei modelli">
                    </div>
                    <div class="craftsmanship-content">
                        <h3>La Selezione dei Modelli</h3>
                        <p>
                            Ogni nostra collezione nasce da un'attenta ricerca stilistica che interpreta le tendenze contemporanee 
                            attraverso una lente di eleganza senza tempo.
                        </p>
                    </div>
                </div>
                
                <div class="craftsmanship-card">
                    <div class="craftsmanship-img">
                        <img src="https://picsum.photos/seed/fitting/600/400.jpg" alt="Vestibilità unica">
                    </div>
                    <div class="craftsmanship-content">
                        <h3>Vestibilità Unica</h3>
                        <p>
                            La vestibilità è la firma invisibile di un capo Éclat Couture. Attraverso un processo di misurazione 
                            preciso, adattiamo ogni capo alla morfologia unica di chi lo indossa.
                        </p>
                    </div>
                </div>
                
                <div class="craftsmanship-card">
                    <div class="craftsmanship-img">
                        <img src="https://picsum.photos/seed/style/600/400.jpg" alt="Ricerca stilistica">
                    </div>
                    <div class="craftsmanship-content">
                        <h3>Ricerca Stilistica</h3>
                        <p>
                            Il nostro stile nasce da una profonda ricerca culturale e artistica. Attingiamo all'architettura, 
                            all'arte, alla natura per creare collezioni che raccontano storie.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- NUOVA SEZIONE TIMELINE DI IMPATTO -->
    <section class="process-timeline" id="process-timeline">
        <div class="container">
            <h2 class="section-title">Il Nostro Processo Creativo</h2>
            <div class="timeline-grid">
                <div class="timeline-item">
                    <img src="https://picsum.photos/seed/inspiration/800/600.jpg" alt="Ispirazione" class="timeline-item-bg">
                    <div class="timeline-item-overlay"></div>
                    <div class="timeline-item-number">01</div>
                    <div class="timeline-item-content">
                        <h3>Ispirazione</h3>
                        <p>Tutto inizia con un'emozione, un'idea che prende forma su carta, ispirata dal mondo dell'arte e della natura.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <img src="https://picsum.photos/seed/sketch/800/600.jpg" alt="Schizzo" class="timeline-item-bg">
                    <div class="timeline-item-overlay"></div>
                    <div class="timeline-item-number">02</div>
                    <div class="timeline-item-content">
                        <h3>Schizzo</h3>
                        <p>Il bozzetto trasforma l'idea in un design concreto, definendo silhouette e dettagli con tratti sicuri.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <img src="https://picsum.photos/seed/materials/800/600.jpg" alt="Tessuti" class="timeline-item-bg">
                    <div class="timeline-item-overlay"></div>
                    <div class="timeline-item-number">03</div>
                    <div class="timeline-item-content">
                        <h3>Scelta dei Tessuti</h3>
                        <p>Selezione dei materiali più pregiati per dare vita al capo, toccando con mano la qualità che fa la differenza.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <img src="https://picsum.photos/seed/pattern/800/600.jpg" alt="Modello" class="timeline-item-bg">
                    <div class="timeline-item-overlay"></div>
                    <div class="timeline-item-number">04</div>
                    <div class="timeline-item-content">
                        <h3>Creazione del Modello</h3>
                        <p>Il cartamodello è la geometria della moda, la base su cui si costruisce la vestibilità perfetta.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <img src="https://picsum.photos/seed/cutting/800/600.jpg" alt="Taglio" class="timeline-item-bg">
                    <div class="timeline-item-overlay"></div>
                    <div class="timeline-item-number">05</div>
                    <div class="timeline-item-content">
                        <h3>Taglio</h3>
                        <p>Precisione millimetrica nel taglio dei tessuti pregiati. Un gesto definitivo che dà forma al futuro capo.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <img src="https://picsum.photos/seed/sewing/800/600.jpg" alt="Cucitura" class="timeline-item-bg">
                    <div class="timeline-item-overlay"></div>
                    <div class="timeline-item-number">06</div>
                    <div class="timeline-item-content">
                        <h3>Cucitura Artigianale</h3>
                        <p>Mano esperta che unisce i pezzi con punti invisibili, dove la macchina da cucire diventa un'estensione dell'anima.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <img src="https://picsum.photos/seed/finishing/800/600.jpg" alt="Finitura" class="timeline-item-bg">
                    <div class="timeline-item-overlay"></div>
                    <div class="timeline-item-number">07</div>
                    <div class="timeline-item-content">
                        <h3>Finitura</h3>
                        <p>Dettagli finali che trasformano un capo in un'opera d'arte. L'ultimo sguardo prima che nasca l'eleganza.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Eventi Section con NUOVO LAYOUT -->
    <section class="events" id="events">
        <div class="container">
            <h2 class="section-title">Calendario Moda Europa</h2>
            
            <div class="events-feed">
                <article class="event-post">
                    <div class="event-post-header">
                        <h3 class="event-post-title">Milano Fashion Week</h3>
                        <span class="event-label">Milano</span>
                    </div>
                    <div class="event-post-meta">
                        <span><i class="far fa-calendar-alt"></i> 19 - 25 Febbraio 2024</span>
                        <span><i class="fas fa-map-marker-alt"></i> Milano, Italia</span>
                    </div>
                    <div class="event-post-body">
                        <p>Il cuore pulsante della moda italiana, dove l'eleganza incontra l'avanguardia. Un palcoscenico irrinunciabile per i nostri capi sartoriali che definiscono le tendenze della stagione.</p>
                    </div>
                    <div class="event-post-footer">
                        <a href="https://www.cameramoda.it" target="_blank" class="event-cta">Scopri di più</a>
                    </div>
                </article>

                <article class="event-post">
                    <div class="event-post-header">
                        <h3 class="event-post-title">Paris Fashion Week</h3>
                        <span class="event-label">Parigi</span>
                    </div>
                    <div class="event-post-meta">
                        <span><i class="far fa-calendar-alt"></i> 26 Febbraio - 5 Marzo 2024</span>
                        <span><i class="fas fa-map-marker-alt"></i> Parigi, Francia</span>
                    </div>
                    <div class="event-post-body">
                        <p>La capitale della haute couture, dove la tradizione e la creatività definiscono le tendenze globali. La nostra ispirazione per l'eccellenza e l'innovazione senza tempo.</p>
                    </div>
                    <div class="event-post-footer">
                        <a href="https://fhcm.paris" target="_blank" class="event-cta">Scopri di più</a>
                    </div>
                </article>

                <article class="event-post">
                    <div class="event-post-header">
                        <h3 class="event-post-title">Pitti Immagine Uomo</h3>
                        <span class="event-label">Firenze</span>
                    </div>
                    <div class="event-post-meta">
                        <span><i class="far fa-calendar-alt"></i> 11 - 14 Giugno 2024</span>
                        <span><i class="fas fa-map-marker-alt"></i> Firenze, Italia</span>
                    </div>
                    <div class="event-post-body">
                        <p>La vetrina leader mondiale per la moda maschile. Un evento chiave per presentare la nostra visione dell'eleganza maschile contemporanea attraverso tessuti e sartoria d'avanguardia.</p>
                    </div>
                    <div class="event-post-footer">
                        <a href="https://www.pittimmagine.com" target="_blank" class="event-cta">Scopri di più</a>
                    </div>
                </article>

                <article class="event-post">
                    <div class="event-post-header">
                        <h3 class="event-post-title">Paris Haute Couture</h3>
                        <span class="event-label">Haute Couture</span>
                    </div>
                    <div class="event-post-meta">
                        <span><i class="far fa-calendar-alt"></i> 22 - 25 Gennaio 2024</span>
                        <span><i class="fas fa-map-marker-alt"></i> Parigi, Francia</span>
                    </div>
                    <div class="event-post-body">
                        <p>Il vertice assoluto della moda, dove l'artigianato diventa arte. L'evento che celebra la sartoria più pura e raffinata, la nostra essenza e la nostra massima espressione.</p>
                    </div>
                    <div class="event-post-footer">
                        <a href="https://fhcm.paris/en/haute-couture" target="_blank" class="event-cta">Scopri di più</a>
                    </div>
                </article>

                <article class="event-post">
                    <div class="event-post-header">
                        <h3 class="event-post-title">Altaroma</h3>
                        <span class="event-label">Roma</span>
                    </div>
                    <div class="event-post-meta">
                        <span><i class="far fa-calendar-alt"></i> 8 - 11 Luglio 2024</span>
                        <span><i class="fas fa-map-marker-alt"></i> Roma, Italia</span>
                    </div>
                    <div class="event-post-body">
                        <p>La piattaforma che valorizza il talento emergente e l'artigianato italiano. Un connubio tra storia e futuro della moda, un palcoscenico per le nuove voci dello stile.</p>
                    </div>
                    <div class="event-post-footer">
                        <a href="https://www.altaroma.it" target="_blank" class="event-cta">Scopri di più</a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq" id="faq">
        <div class="container">
            <h2 class="section-title">Domande Frequenti</h2>
            
            <div class="faq-container">
                <div class="faq-item">
                    <div class="faq-question">
                        Come posso prenotare una consulenza sartoriale personalizzata?
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Prenotare una consulenza con Éclat Couture è semplice. Puoi contattarci tramite il nostro modulo di contatto, chiamarci direttamente al numero +39 02 12345678 o inviarci un'email a info@eclatcouture.it. Le nostre consulenze private si svolgono nel nostro atelier di Milano, dove potrai discutere delle tue esigenze con i nostri designer e sarte. Ti consigliamo di prenotare con almeno due settimane di anticipo per garantire la disponibilità del nostro team.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        Quali sono i tempi di realizzazione di un capo su misura?
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>I tempi di realizzazione variano in base alla complessità del capo e alla disponibilità dei materiali scelti. In media, un abito da sera richiede da 4 a 6 settimane, mentre un capo più semplice può essere pronto in 2-3 settimane. Durante la consulenza iniziale, ti forniremo una stima precisa dei tempi di consegna basata sulle tue specifiche esigenze. Per occasioni speciali, come matrimoni, ti consigliamo di contattarci con almeno 3-4 mesi di anticipo.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        Come scelgo il tessuto giusto per il mio capo?
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>La scelta del tessuto è un momento fondamentale del processo creativo. Durante la consulenza, le nostre esperte ti guideranno nella selezione del materiale più adatto al tuo stile, all'occasione e alla tua morfologia. Abbiamo una vasta selezione di tessuti pregiati provenienti dalle migliori filature italiane e internazionali. Valuteremo insieme fattori come la stagione, il tipo di evento, il comfort desiderato e l'effetto visivo che vuoi ottenere. Ti mostreremo campioni e ti consiglieremo sulla base della nostra esperienza ventennale.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        Offrite servizi di restyling o alterazione di capi esistenti?
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, offriamo servizi di restyling e alterazione per dare nuova vita ai capi che già possiedi. Che si tratti di un abito che non calza più perfettamente, di un capo ereditato che desideri modernizzare o di un acquisto che necessita di piccole modifiche, le nostre sarte possono intervenire con maestria. Il restyling è un'arte che permette di trasformare un capo esistente in qualcosa di completamente nuovo, rispettando sempre la sua anima originale. Contattaci per una valutazione del tuo capo.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        Come si prende cura dei capi in tessuti pregiati per garantirne la longevità?
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>I capi in tessuti pregiati richiedono cure particolari per mantenersi belli nel tempo. In generale, consigliamo il lavaggio a secco professionale per sete, pizzi e materiali delicati. Per capi in lana o cachemire, preferibilmente lavaggio a mano in acqua fredda con detergenti specifici. Conserva i tuoi capi appesi in luoghi asciutti e lontani dalla luce diretta del sole, utilizzando sacchetti di tessuto traspirante. Per ogni capo Éclat Couture, forniamo una guida dettagliata di manutenzione personalizzata, perché crediamo che la cura sia parte integrante dell'esperienza di possedere un capo di alta moda.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        Spedite in tutto il mondo e come viene imballato un capo così prezioso?
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, Éclat Couture spedisce in tutto il mondo. Ogni capo viene imballato con la massima cura per garantirne l'integrità durante il trasporto. Utilizziamo scatole rigide personalizzate, carta di seta senza acido e sacchetti protettivi. Il capo viene accuratamente piegato o appeso a seconda delle sue caratteristiche, e accompagnato da un certificato di autenticità e la guida di manutenzione. Le spedizioni internazionali vengono effettuate tramite corrieri specializzati con servizio tracking completo e assicurazione sul valore del capo. Per ordini particolarmente preziosi, offriamo anche un servizio di consegna personale.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        Posso visitare l'atelier per vedere dal vivo il lavoro delle sarte?
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Assolutamente sì. Crediamo fermamente nella trasparenza del nostro processo artigianale e amiamo condividere la nostra passione. Oltre agli Open Day periodici, puoi prenotare una visita privata del nostro atelier. Durante la visita, potrai vedere le nostre sarte al lavoro, toccare con mano i tessuti pregiati che utilizziamo e comprendere l'arte che si nasconde dietro ogni capo. Le visite si svolgono su appuntamento dal martedì al venerdì, dalle 10:00 alle 17:00. Contattaci per organizzare la tua esperienza Éclat Couture.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- NUOVA FASCIA DI MARKETING (Spostata sopra il footer) -->
    <section class="marketing-banner">
        <div class="container">
            <h2>Entra nell'Esclusivo Mondo Éclat Couture</h2>
            <p>Unisciti alla nostra community per ricevere anteprime esclusive, inviti privati per eventi speciali e sconti unici sulla tua prima creazione sartoriale. L'eleganza è un privilegio, goditelo.</p>
            <div class="marketing-ctas">
                <input type="email" placeholder="Il tuo indirizzo email">
                <button class="btn-cta">Iscriviti Ora</button>
                <a href="https://www.instagram.com" target="_blank" class="btn-cta secondary">Seguici su Instagram</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Éclat Couture</h3>
                    <p>Alta moda artigianale dal 2004. Ogni capo è un'opera d'arte unica, creata con passione e maestria italiana.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-pinterest"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-column">
                    <h3>Link Utili</h3>
                    <ul>
                        <li><a href="#collections">Collezioni</a></li>
                        <li><a href="#craftsmanship">Sartoria</a></li>
                        <li><a href="#events">Eventi</a></li>
                        <li><a href="#faq">FAQ</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Contatti</h3>
                    <p><i class="fas fa-map-marker-alt"></i> Via Montenapoleone, 15<br>20121 Milano, Italia</p>
                    <p><i class="fas fa-phone"></i> +39 02 12345678</p>
                    <p><i class="fas fa-envelope"></i> info@eclatcouture.it</p>
                </div>
                
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Iscriviti per ricevere aggiornamenti sulle nuove collezioni e eventi esclusivi.</p>
                    <form>
                        <input type="email" placeholder="Il tuo indirizzo email" style="width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 4px;">
                        <button type="submit" style="width: 100%; padding: 10px; background-color: var(--secondary-color); color: white; border: none; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px;">Iscriviti</button>
                    </form>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2024 Éclat Couture. Tutti i diritti riservati. | Privacy Policy | Termini e Condizioni</p>
            </div>
        </div>
    </footer>

    <script>
        // Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // Mobile menu toggle
        const menuToggle = document.getElementById('menuToggle');
        const nav = document.getElementById('nav');
        
        menuToggle.addEventListener('click', function() {
            nav.classList.toggle('active');
            menuToggle.innerHTML = 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();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    const headerHeight = document.getElementById('header').offsetHeight;
                    const targetPosition = targetElement.offsetTop - headerHeight;
                    
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    if (nav.classList.contains('active')) {
                        nav.classList.remove('active');
                        menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
                    }
                }
            });
        });

        // Collection tabs
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');
        
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // Remove active class from all tabs and contents
                tabBtns.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => content.classList.remove('active'));
                
                // Add active class to clicked tab and corresponding content
                this.classList.add('active');
                document.getElementById(tabId).classList.add('active');
            });
        });

        // FAQ accordion
        const faqQuestions = document.querySelectorAll('.faq-question');
        
        faqQuestions.forEach(question => {
            question.addEventListener('click', function() {
                const answer = this.nextElementSibling;
                const isActive = this.classList.contains('active');
                
                // Close all FAQs
                faqQuestions.forEach(q => {
                    q.classList.remove('active');
                    q.nextElementSibling.classList.remove('show');
                });
                
                // Open clicked FAQ if it wasn't active
                if (!isActive) {
                    this.classList.add('active');
                    answer.classList.add('show');
                }
            });
        });

        // Custom cursor
        document.addEventListener('mousemove', function(e) {
            const cursor = document.createElement('div');
            cursor.classList.add('custom-cursor');
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
            document.body.appendChild(cursor);
            
            setTimeout(() => {
                cursor.remove();
            }, 100);
        });
    </script>
</body>
</html>