VerdeTech (v3) - Orto Botanico | P by @Darkness977 - Codewith.it

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

References

<head>Tag primario di un documento HTML
<i>Formatta il testo in corsivo/italico non enfatizzato
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
minlengthDetermina il numero minimo di caratteri per un elemento input
<em>Formatta il testo in corsivo/italico enfatizzato
formSpecifica a quale form appartiene un elemento.

Users

Log in to search for users

Explore

Find inspiration

fontawesome-esempio

Prima Coccola ebay(2)

STILI + IMMAGINI

Lista con ricerca

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">
    <title>VerdeTech - Orto Botanico | Piante Esotiche, Bonsai e Fioriere di Design</title>
    <meta name="description" content="Scopri la nostra collezione esclusiva di piante esotiche, bonsai artistici e fioriere di design. VerdeTech unisce natura e tecnologia per creare spazi verdi unici.">
    <meta name="keywords" content="orto botanico, piante esotiche, bonsai, fioriere design, giardinaggio urbano, piante rare, verde tecnologico, decorazione naturale">
    <meta name="author" content="VerdeTech Orto Botanico">
    <meta property="og:title" content="VerdeTech - Orto Botanico | Piante Esotiche, Bonsai e Fioriere di Design">
    <meta property="og:description" content="Scopri la nostra collezione esclusiva di piante esotiche, bonsai artistici e fioriere di design.">
    <meta property="og:image" content="https://picsum.photos/seed/verdetch-og/1200/630.jpg">
    <meta property="og:url" content="https://www.verdetch.it">
    <meta name="twitter:card" content="summary_large_image">
    
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="VerdeTech - Orto Botanico">
    <meta itemprop="description" content="Scopri la nostra collezione esclusiva di piante esotiche, bonsai artistici e fioriere di design.">
    <meta itemprop="image" content="https://picsum.photos/seed/verdetch-social/1200/630.jpg">
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="https://picsum.photos/seed/verdetch-favicon/32/32.jpg">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #2ecc71;
            --secondary-color: #27ae60;
            --accent-color: #16a085;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
            --text-color: #333;
            --gradient-1: linear-gradient(135deg, #2ecc71, #27ae60);
            --gradient-2: linear-gradient(135deg, #16a085, #2c3e50);
            --gradient-3: linear-gradient(135deg, #3498db, #2ecc71);
            --gradient-4: linear-gradient(135deg, #e74c3c, #f39c12);
            --gradient-5: linear-gradient(135deg, #8e44ad, #3498db);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --shadow-light: 0 10px 30px rgba(0, 0, 0, 0.05);
            --shadow-medium: 0 20px 40px rgba(0, 0, 0, 0.1);
            --shadow-heavy: 0 30px 60px rgba(0, 0, 0, 0.15);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
            background-color: #f8f9fa;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        a {
            text-decoration: none;
            color: var(--primary-color);
            transition: var(--transition);
        }
        
        a:hover {
            color: var(--secondary-color);
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: var(--transition);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
        }
        
        header.scrolled {
            padding: 10px 0;
            background: rgba(255, 255, 255, 0.98);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: 700;
            color: var(--dark-color);
        }
        
        .logo i {
            font-size: 30px;
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        .main-nav {
            display: flex;
            list-style: none;
        }
        
        .main-nav li {
            margin-left: 30px;
        }
        
        .main-nav a {
            color: var(--dark-color);
            font-weight: 500;
            position: relative;
            padding: 5px 0;
        }
        
        .main-nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: var(--transition);
        }
        
        .main-nav a:hover::after {
            width: 100%;
        }
        
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--dark-color);
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1545823812-046670c74194?') center/cover no-repeat;/*sfondo-wallpaper-sostituita*/
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-1);
            opacity: 0.3;
            z-index: 1;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            padding: 0 20px;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.2;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }
        
        .hero h1 span {
            display: inline-block;
            opacity: 0;
            transform: translateY(50px);
            animation: shiftIn 0.8s forwards;
        }
        
        .hero h1 span:nth-child(1) { animation-delay: 0.1s; }
        .hero h1 span:nth-child(2) { animation-delay: 0.3s; }
        .hero h1 span:nth-child(3) { animation-delay: 0.5s; }
        .hero h1 span:nth-child(4) { animation-delay: 0.7s; }
        .hero h1 span:nth-child(5) { animation-delay: 0.9s; }
        .hero h1 span:nth-child(6) { animation-delay: 1.1s; }
        
        @keyframes shiftIn {
            0% {
                opacity: 0;
                transform: translateY(50px) translateX(-20px);
            }
            50% {
                opacity: 0.7;
                transform: translateY(10px) translateX(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) translateX(0);
            }
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0;
            animation: fadeIn 1s forwards 1.3s;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .hero-buttons {
            opacity: 0;
            animation: fadeIn 1s forwards 1.6s;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--primary-color);
            color: white;
            border-radius: 30px;
            font-weight: 500;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--secondary-color);
            z-index: -1;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .btn:hover::before {
            transform: translateY(0);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(-1px);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid white;
        }
        
        .btn-outline::before {
            background: white;
        }
        
        .btn-outline:hover {
            color: var(--primary-color);
        }
        
        /* Scroll Indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }
        
        .scroll-indicator i {
            font-size: 30px;
            color: white;
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-20px);
            }
            60% {
                transform: translateY(-10px);
            }
        }
        
        /* Marketing Metrics Section */
        .marketing-metrics {
            padding: 80px 0;
            background: white;
            position: relative;
            overflow: hidden;
        }
        
        .marketing-metrics::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(22, 160, 133, 0.05));
            z-index: -1;
        }
        
        .metrics-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        
        .metric-card {
            text-align: center;
            padding: 30px;
            background: white;
            border-radius: 15px;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
        }
        
        .metric-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }
        
        .metric-value {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .metric-label {
            font-size: 1.1rem;
            color: var(--dark-color);
            margin-bottom: 15px;
        }
        
        .metric-description {
            color: #666;
            font-size: 0.9rem;
        }
        
        /* About Section */
        .about {
            padding: 100px 0;
            background: white;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--dark-color);
            position: relative;
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--gradient-1);
        }
        
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        
        .about-text h3 {
            font-size: 1.8rem;
            color: var(--dark-color);
            margin-bottom: 20px;
        }
        
        .about-text p {
            margin-bottom: 20px;
        }
        
        .about-image {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: var(--shadow-medium);
        }
        
        .about-image img {
            transition: transform 0.5s ease;
        }
        
        .about-image:hover img {
            transform: scale(1.05);
        }
        
        /* Features Section */
        .features {
            padding: 100px 0;
            background: var(--light-color);
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .feature-card {
            text-align: center;
            padding: 40px 30px;
            border-radius: 15px;
            background: white;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--gradient-1);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: var(--gradient-1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 30px;
            transition: var(--transition);
        }
        
        .feature-card:hover .feature-icon {
            transform: scale(1.1);
            box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3);
        }
        
        .feature-card h3 {
            font-size: 1.5rem;
            color: var(--dark-color);
            margin-bottom: 15px;
        }
        
        /* Product of the Month Section */
        .product-month {
            padding: 100px 0;
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(22, 160, 133, 0.05));
            position: relative;
        }
        
        .product-month-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-heavy);
        }
        
        .product-month-image {
            position: relative;
            height: 100%;
            min-height: 400px;
        }
        
        .product-month-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .product-month-badge {
            position: absolute;
            top: 30px;
            left: 30px;
            background: var(--gradient-4);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 600;
            box-shadow: var(--shadow-medium);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
            }
        }
        
        .product-month-info {
            padding: 50px;
        }
        
        .product-month-info h3 {
            font-size: 1.5rem;
            color: #777;
            margin-bottom: 10px;
        }
        
        .product-month-info h2 {
            font-size: 2.2rem;
            color: var(--dark-color);
            margin-bottom: 20px;
        }
        
        .product-month-info p {
            margin-bottom: 30px;
            font-size: 1.1rem;
        }
        
        .product-price {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 30px;
        }
        
        .product-price .old-price {
            font-size: 1.2rem;
            color: #999;
            text-decoration: line-through;
            margin-left: 10px;
        }
        
        /* Weekly Deal Section */
        .weekly-deal {
            padding: 100px 0;
            background: var(--gradient-4);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .weekly-deal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://plus.unsplash.com/premium_photo-1661963124920-b2f627cf5ae7?') center/cover;
            opacity: 0.1;
            z-index: 0;
        }
        
        .weekly-deal .container {
            position: relative;
            z-index: 1;
        }
        
        .weekly-deal .section-title h2 {
            color: white;
        }
        
        .weekly-deal .section-title h2::after {
            background: white;
        }
        
        .weekly-deal-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-heavy);
        }
        
        .weekly-deal-info {
            padding: 50px;
        }
        
        .weekly-deal-info h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }
        
        .weekly-deal-info h2 {
            font-size: 2.2rem;
            margin-bottom: 20px;
        }
        
        .weekly-deal-info p {
            margin-bottom: 30px;
            font-size: 1.1rem;
        }
        
        .scarcity {
            background: rgba(255, 255, 255, 0.2);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
        }
        
        .scarcity i {
            font-size: 24px;
            margin-right: 15px;
            color: #ffcc00;
        }
        
        .scarcity-text {
            font-weight: 500;
        }
        
        .countdown {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        
        .countdown-item {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            min-width: 80px;
        }
        
        .countdown-value {
            font-size: 2rem;
            font-weight: 700;
            display: block;
        }
        
        .countdown-label {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        .weekly-deal-image {
            position: relative;
            height: 100%;
            min-height: 400px;
        }
        
        .weekly-deal-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .weekly-deal-badge {
            position: absolute;
            top: 30px;
            left: 30px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 600;
            box-shadow: var(--shadow-medium);
        }
        
        /* Products Section */
        .products {
            padding: 100px 0;
            background: white;
        }
        
        .product-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }
        
        .tab-btn {
            background: none;
            border: none;
            padding: 12px 25px;
            margin: 5px;
            font-size: 16px;
            font-weight: 500;
            color: var(--dark-color);
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: var(--transition);
            border-radius: 30px 30px 0 0;
        }
        
        .tab-btn.active {
            color: var(--primary-color);
            background: rgba(46, 204, 113, 0.1);
            border-bottom-color: var(--primary-color);
        }
        
        .tab-btn:hover {
            color: var(--primary-color);
            background: rgba(46, 204, 113, 0.05);
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .product-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }
        
        .product-image {
            height: 220px;
            overflow: hidden;
            position: relative;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.1);
        }
        
        .product-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.7) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .product-card:hover .product-overlay {
            opacity: 1;
        }
        
        .product-info {
            padding: 25px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .product-info h3 {
            font-size: 1.3rem;
            color: var(--dark-color);
            margin-bottom: 10px;
        }
        
        .product-info p {
            margin-bottom: 20px;
            color: #666;
            flex-grow: 1;
        }
        
        .product-price {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 20px;
        }
        
        /* Benefits Section */
        .benefits {
            padding: 100px 0;
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(22, 160, 133, 0.1));
        }
        
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        
        .benefit-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: var(--shadow-light);
            text-align: center;
            transition: var(--transition);
            height: 100%;
        }
        
        .benefit-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }
        
        .benefit-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 20px;
            background: var(--gradient-2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 30px;
            transition: var(--transition);
        }
        
        .benefit-card:hover .benefit-icon {
            transform: scale(1.1);
            box-shadow: 0 10px 20px rgba(22, 160, 133, 0.3);
        }
        
        .benefit-card h3 {
            font-size: 1.3rem;
            color: var(--dark-color);
            margin-bottom: 15px;
        }
        
        /* Testimonials Section */
        .testimonials {
            padding: 100px 0;
            background: white;
        }
        
        .testimonials-slider {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .testimonial {
            text-align: center;
            padding: 40px;
            background: var(--light-color);
            border-radius: 15px;
            box-shadow: var(--shadow-light);
        }
        
        .testimonial-text {
            font-size: 1.1rem;
            font-style: italic;
            margin-bottom: 30px;
            position: relative;
        }
        
        .testimonial-text::before {
            content: '"';
            font-size: 60px;
            color: var(--primary-color);
            opacity: 0.3;
            position: absolute;
            top: -20px;
            left: -20px;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-light);
        }
        
        .author-info h4 {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
        
        .author-info p {
            color: #666;
            font-size: 0.9rem;
        }
        
        .slider-controls {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        
        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            margin: 0 5px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .slider-dot.active {
            background: var(--primary-color);
            transform: scale(1.2);
        }
        
        /* Interview Section */
        .interview {
            padding: 100px 0;
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(22, 160, 133, 0.05));
        }
        
        .interview-container {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-heavy);
            margin-bottom: 50px;
        }
        
        .interview-story {
            padding: 60px;
            line-height: 1.8;
        }
        
        .interview-story h2 {
            font-size: 2.5rem;
            color: var(--dark-color);
            margin-bottom: 30px;
            text-align: center;
            position: relative;
        }
        
        .interview-story h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--gradient-1);
        }
        
        .interview-story p {
            font-size: 1.1rem;
            margin-bottom: 25px;
            color: #444;
            text-align: justify;
        }
        
        .interview-story p:first-of-type::first-letter {
            font-size: 4rem;
            font-weight: 700;
            float: left;
            line-height: 1;
            margin-right: 8px;
            color: var(--primary-color);
            font-family: 'Georgia', serif;
        }
        
        .highlight {
            background: rgba(46, 204, 113, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
            color: var(--primary-color);
        }
        
        /* Founder & Manager Info Section */
        .founder-info {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 50px;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-heavy);
            align-items: center;
        }
        
        .founder-details {
            padding: 50px;
        }
        
        .founder-details h3 {
            font-size: 2rem;
            color: var(--dark-color);
            margin-bottom: 5px;
        }
        
        .founder-role {
            color: var(--primary-color);
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--light-color);
        }
        
        .competencies {
            display: grid;
            gap: 25px;
        }
        
        .competency-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        
        .competency-item i {
            font-size: 20px;
            color: var(--primary-color);
            margin-top: 2px;
            width: 24px;
            text-align: center;
        }
        
        .competency-item h4 {
            font-size: 1.1rem;
            color: var(--dark-color);
            margin-bottom: 5px;
        }
        
        .competency-item p {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        
        .founder-image {
            position: relative;
            background: var(--gradient-2);
            min-height: 400px;
        }
        
        .founder-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .experience-badge {
            position: absolute;
            bottom: 30px;
            right: 30px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 15px 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: var(--shadow-medium);
        }
        
        .years {
            display: block;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-color);
            line-height: 1;
        }
        
        .label {
            font-size: 0.9rem;
            color: var(--dark-color);
            font-weight: 500;
        }
        
        /* Video Tour Section */
        .video-tour {
            padding: 80px 0;
            background: white;
        }
        
        .video-container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .video-placeholder {
            width: 100%;
            height: 400px;
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.8), rgba(22, 160, 133, 0.8)), url('https://images.unsplash.com/photo-1446069879619-0a0417d111b4?') center/cover;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            position: relative;
            overflow: hidden;
            margin-bottom: 50px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .video-placeholder:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-heavy);
        }
        
        .play-button {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            transition: var(--transition);
        }
        
        .video-placeholder:hover .play-button {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .play-button i {
            font-size: 40px;
            margin-left: 5px;
        }
        
        .video-info {
            text-align: center;
            z-index: 2;
        }
        
        .video-info h3 {
            font-size: 2rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .video-info p {
            font-size: 1.1rem;
            opacity: 0.9;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .tour-steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 30px;
        }
        
        .tour-step {
            background: var(--light-color);
            border-radius: 15px;
            padding: 30px 20px;
            text-align: center;
            transition: var(--transition);
            position: relative;
        }
        
        .tour-step:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
            background: white;
        }
        
        .step-number {
            width: 50px;
            height: 50px;
            background: var(--gradient-1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 1.2rem;
            margin: 0 auto 15px;
            position: relative;
            z-index: 1;
        }
        
        .step-icon {
            width: 70px;
            height: 70px;
            background: rgba(46, 204, 113, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            font-size: 24px;
            margin: 0 auto 15px;
            transition: var(--transition);
        }
        
        .tour-step:hover .step-icon {
            background: var(--gradient-1);
            color: white;
            transform: scale(1.1);
        }
        
        .step-text h4 {
            font-size: 1.2rem;
            color: var(--dark-color);
            margin-bottom: 8px;
        }
        
        .step-text p {
            color: #666;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        /* FAQ Section */
        .faq {
            padding: 100px 0;
            background: var(--light-color);
        }
        
        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .faq-item {
            background: white;
            border-radius: 10px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-light);
        }
        
        .faq-question {
            padding: 20px;
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--dark-color);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }
        
        .faq-question:hover {
            background: rgba(46, 204, 113, 0.05);
        }
        
        .faq-question i {
            transition: var(--transition);
        }
        
        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }
        
        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .faq-item.active .faq-answer {
            max-height: 300px;
            padding: 0 20px 20px;
        }
        
        /* CTA Section */
        .cta {
            padding: 100px 0;
            background: var(--gradient-1);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1470058869958-2a77ade41c02?') center/cover;
            opacity: 0.1;
            z-index: 0;
        }
        
        .cta .container {
            position: relative;
            z-index: 1;
        }
        
        .cta h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        .cta p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 30px;
        }
        
        .cta-buttons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn-cta {
            background: white;
            color: var(--primary-color);
            margin: 5px;
        }
        
        .btn-cta::before {
            background: var(--dark-color);
        }
        
        .btn-cta:hover {
            color: white;
        }
        
        /* Contact Section */
        .contact {
            padding: 100px 0;
            background: white;
        }
        
        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
        }
        
        .contact-info {
            padding: 40px;
            background: var(--light-color);
            border-radius: 15px;
            box-shadow: var(--shadow-light);
        }
        
        .contact-info h3 {
            font-size: 1.8rem;
            color: var(--dark-color);
            margin-bottom: 30px;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 25px;
        }
        
        .contact-item i {
            font-size: 20px;
            color: var(--primary-color);
            margin-right: 15px;
            margin-top: 5px;
            width: 30px;
        }
        
        .contact-form {
            padding: 40px;
            background: var(--light-color);
            border-radius: 15px;
            box-shadow: var(--shadow-light);
        }
        
        .contact-form h3 {
            font-size: 1.8rem;
            color: var(--dark-color);
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: var(--transition);
            background: white;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
        }
        
        select.form-control {
            cursor: pointer;
        }
        
        textarea.form-control {
            resize: vertical;
            min-height: 120px;
        }
        
        /* Footer */
        footer {
            background: var(--dark-color);
            color: white;
            padding: 60px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 1.3rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--primary-color);
        }
        
        .footer-column p {
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: #bbb;
            transition: var(--transition);
        }
        
        .footer-links a:hover {
            color: var(--primary-color);
            padding-left: 5px;
        }
        
        .social-links {
            display: flex;
            margin-top: 25px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            margin-right: 15px;
            color: white;
            transition: var(--transition);
        }
        
        .social-links a:hover {
            background: var(--primary-color);
            transform: translateY(-3px);
        }
        
        .newsletter-form {
            display: flex;
            margin-top: 25px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: var(--shadow-light);
        }
        
        .newsletter-form input {
            flex: 1;
            padding: 12px 20px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        .newsletter-form input::placeholder {
            color: #bbb;
        }
        
        .newsletter-form button {
            padding: 12px 20px;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .newsletter-form button:hover {
            background: var(--secondary-color);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #bbb;
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .about-content,
            .contact-content,
            .product-month-content,
            .weekly-deal-content,
            .founder-info {
                grid-template-columns: 1fr;
            }
            
            .about-image,
            .product-month-image,
            .weekly-deal-image,
            .founder-image {
                order: -1;
                min-height: 300px;
            }
        }
        
        @media (max-width: 768px) {
            .main-nav {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                background: white;
                flex-direction: column;
                padding: 20px;
                box-shadow: var(--shadow-medium);
                transform: translateY(-100%);
                opacity: 0;
                visibility: hidden;
                transition: var(--transition);
            }
            
            .main-nav.active {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
            
            .main-nav li {
                margin: 10px 0;
            }
            
            .menu-toggle {
                display: block;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .cta h2 {
                font-size: 2rem;
            }

            .product-month-info, .weekly-deal-info, .interview-story, .founder-details {
                padding: 30px;
            }

            .countdown {
                gap: 10px;
            }

            .countdown-item {
                min-width: 70px;
                padding: 10px;
            }
            
            .tour-steps {
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 20px;
            }
            
            .tour-step {
                padding: 20px 15px;
            }
        }
        
        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Loading Animation */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .loader.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .loader-circle {
            width: 50px;
            height: 50px;
            border: 5px solid var(--light-color);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- Loader -->
    <div class="loader" id="loader">
        <div class="loader-circle"></div>
    </div>
    
    <!-- Header -->
    <header id="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <i class="fas fa-leaf"></i>
                    <span>VerdeTech</span>
                </div>
                <nav>
                    <ul class="main-nav" id="mainNav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">Chi Siamo</a></li>
                        <li><a href="#product-month">Offerte</a></li>
                        <li><a href="#products">Prodotti</a></li>
                        <li><a href="#benefits">Benefici</a></li>
                        <li><a href="#testimonials">Testimonianze</a></li>
                        <li><a href="#interview">Intervista</a></li>
                        <li><a href="#faq">FAQ</a></li>
                        <li><a href="#contact">Contatti</a></li>
                    </ul>
                    <button class="menu-toggle" id="menuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                </nav>
            </div>
        </div>
    </header>
    
    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h1><span>Natura</span> <span>e</span> <span>Tecnologia</span> <span>per</span> <span>Spazi</span> <span>Unici immersi verde</span></h1>
            <p>Esplora la nostra collezione esclusiva di piante esotiche, bonsai artistici e fioriere di <b>green design</b> che trasformano ogni ambiente in un'oasi di benessere.</p>
            <div class="hero-buttons">
                <a href="#products" class="btn">Catalogo Piante</a>
                <a href="#contact" class="btn btn-outline">Contattaci</a>
            </div>
        </div>
        <div class="scroll-indicator">
            <i class="fas fa-chevron-down"></i>
        </div>
    </section>
    
    <!-- Marketing Metrics Section -->
    <section class="marketing-metrics">
        <div class="container">
            <div class="section-title fade-in">
                <h2>I Nostri Risultati</h2>
            </div>
            <div class="metrics-container">
                <div class="metric-card fade-in">
                    <div class="metric-value" data-target="12500">0</div>
                    <div class="metric-label">Clienti Soddisfatti</div>
                    <div class="metric-description">Persone che hanno trasformato i loro spazi con le nostre piante</div>
                </div>
                <div class="metric-card fade-in">
                    <div class="metric-value" data-target="98">0</div>
                    <div class="metric-label">% Soddisfazione</div>
                    <div class="metric-description">Valutazione media dei nostri clienti</div>
                </div>
                <div class="metric-card fade-in">
                    <div class="metric-value" data-target="450">0</div>
                    <div class="metric-label">Varietà di Piante</div>
                    <div class="metric-description">Specie uniche da tutto il mondo</div>
                </div>
                <div class="metric-card fade-in">
                    <div class="metric-value" data-target="15">0</div>
                    <div class="metric-label">Anni di Esperienza</div>
                    <div class="metric-description">Dedicati alla botanica e al design</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- About Section -->
    <section class="about" id="about">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Chi Siamo</h2>
            </div>
            <div class="about-content">
                <div class="about-text fade-in">
                    <h3>VerdeTech: Dove la Natura Incontra l'Innovazione</h3>
                    <p>Siamo un team di appassionati botanici e designer che uniscono la bellezza della natura con le più moderne tecnologie per creare soluzioni verdi uniche. La nostra missione è portare la natura in ogni spazio, migliorando la qualità della vita e promuovendo il benessere attraverso il potere delle piante.</p>
                    <p>Con oltre 20 anni di esperienza nel settore, abbiamo sviluppato tecniche colturali innovative che garantiscono piante sane, resistenti e di straordinaria bellezza, adatte sia per ambienti domestici che professionali.</p>
                    <a href="#contact" class="btn">Scopri di più</a>
                </div>
                <div class="about-image fade-in">
                    <img src="https://images.unsplash.com/photo-1602953589577-a7e91286f5ac?" alt="VerdeTech Team">
                </div>
            </div>
        </div>
    </section>
    
    <!-- Features Section -->
    <section class="features">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Perché Scegliere VerdeTech</h2>
            </div>
            <div class="features-grid">
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-seedling"></i>
                    </div>
                    <h3>Qualità Superiore</h3>
                    <p>Piante selezionate con cura, coltivate con tecniche innovative che garantiscono salute e longevità.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h3>Consegna Rapida</h3>
                    <p>Spedizioni veloci e sicure in tutta Italia, con imballaggi speciali per proteggere ogni pianta.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3>Consulenza Esperta</h3>
                    <p>Il nostro team di botanici è sempre a disposizione per consigli personalizzati e assistenza.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3>Sostenibilità</h3>
                    <p>Coltiviamo le nostre piante con metodi ecologici, rispettando l'ambiente e promuovendo la biodiversità.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-certificate"></i>
                    </div>
                    <h3>Garanzia VerdeTech</h3>
                    <p>Tutte le nostre piante sono coperte da una garanzia di 30 giorni per la tua tranquillità.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-microscope"></i>
                    </div>
                    <h3>Ricerca e Innovazione</h3>
                    <p>Investiamo costantemente in ricerca per sviluppare nuove varietà e tecniche colturali all'avanguardia.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Product of the Month Section -->
    <section class="product-month" id="product-month">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Prodotto del Mese</h2>
            </div>
            <div class="product-month-content fade-in">
                <div class="product-month-image">
                    <img src="https://images.unsplash.com/photo-1677784029379-6d083a9af3a7?" alt="Monstera Deliciosa">
                    <div class="product-month-badge">Prodotto del Mese</div>
                </div>
                <div class="product-month-info">
                    <h3>Esclusività Limitata</h3>
                    <h2>Monstera Deliciosa Variegata</h2>
                    <p>Un capolavoro della natura. Questa rara varietà di Monstera presenta splendide variegature bianche su ogni foglia, rendendola un pezzo unico e ricercato per ogni collezionista. Perfetta come punto focale in qualsiasi ambiente moderno.</p>
                    <div class="product-price">
                        €189,00 <span class="old-price">€249,00</span>
                    </div>
                    <a href="#contact" class="btn">Ordina Ora</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Weekly Deal Section -->
    <section class="weekly-deal">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Offerta Lampo della Settimana</h2>
            </div>
            <div class="weekly-deal-content fade-in">
                <div class="weekly-deal-info">
                    <h3>Super Sconto -72 Ore</h3>
                    <h2>Kit Bonsai per Principianti</h2>
                    <p>Tutto il necessario per iniziare il tuo viaggio nel mondo dei bonsai. Include un bonsai Ficus Ginseng di 3 anni, vaso ceramico, concime, forbici professionali e una guida illustrata. L'offerta perfetta per chi vuole avvicinarsi a questa affascinante arte.</p>
                    <div class="scarcity">
                        <i class="fas fa-exclamation-triangle"></i>
                        <div class="scarcity-text">
                            <strong>Attenzione:</strong> Solo <span id="stockCount">7</span> kit disponibili a questo prezzo!
                        </div>
                    </div>
                    <div class="countdown" id="countdown">
                        <div class="countdown-item">
                            <span class="countdown-value" id="days">00</span>
                            <span class="countdown-label">Giorni</span>
                        </div>
                        <div class="countdown-item">
                            <span class="countdown-value" id="hours">00</span>
                            <span class="countdown-label">Ore</span>
                        </div>
                        <div class="countdown-item">
                            <span class="countdown-value" id="minutes">01</span>
                            <span class="countdown-label">Minuti</span>
                        </div>
                        <div class="countdown-item">
                            <span class="countdown-value" id="seconds">00</span>
                            <span class="countdown-label">Secondi</span>
                        </div>
                    </div>
                    <a href="#contact" class="btn">Approfitta Ora</a>
                </div>
                <div class="weekly-deal-image">
                    <img src="https://plus.unsplash.com/premium_photo-1739452120318-bd7ebd7c7616?" alt="Kit Bonsai per Principianti">
                    <div class="weekly-deal-badge">Offerta Limitata</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Products Section -->
    <section class="products" id="products">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Il Nostro Catalogo Completo</h2>
            </div>
            <div class="product-tabs fade-in">
                <button class="tab-btn active" data-tab="exotic">Piante Esotiche</button>
                <button class="tab-btn" data-tab="bonsai">Bonsai</button>
                <button class="tab-btn" data-tab="planters">Fioriere Design</button>
                <button class="tab-btn" data-tab="collections">Collezioni Speciali</button>
            </div>
            <div class="products-grid" id="productsGrid">
                <!-- Products will be loaded here via JavaScript -->
            </div>
        </div>
    </section>
    
    <!-- Benefits Section -->
    <section class="benefits" id="benefits">
        <div class="container">
            <div class="section-title fade-in">
                <h2>I Benefici del Verde nella Tua Vita</h2>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-lungs"></i>
                    </div>
                    <h3>Aria Più Pulita</h3>
                    <p>Le piante purificano l'aria eliminando tossine e aumentando i livelli di ossigeno, migliorando la qualità dell'ambiente domestico e lavorativo.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3>Migliore Concentrazione</h3>
                    <p>Studi dimostrano che la presenza di piante aumenta la produttività fino al 15% e migliora la capacità di concentrazione.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3>Riduzione dello Stress</h3>
                    <p>Il contatto con la natura riduce i livelli di cortisolo, l'ormone dello stress, promuovendo un senso di calma e benessere.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-bed"></i>
                    </div>
                    <h3>Miglior Sonno</h3>
                    <p>Alcune piante rilasciano ossigeno durante la notte, migliorando la qualità del sonno e aiutando a combattere l'insonnia.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <h3>Aumento dell'Energia</h3>
                    <p>Ambienti verdi stimolano i sensi e aumentano i livelli di energia, combattendo la stanchezza e l'affaticamento.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Rafforzo del Sistema Immunitario</h3>
                    <p>Le piante riducono la polvere e gli allergeni nell'aria, rafforzando le difese immunitarie e prevenendo malattie respiratorie.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Testimonials Section -->
    <section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Dicono di Noi</h2>
            </div>
            <div class="testimonials-slider fade-in">
                <div class="testimonial">
                    <p class="testimonial-text">Ho acquistato diverse piante esotiche da VerdeTech e sono rimasto sbalordito dalla qualità e dalla salute delle piante ricevute. Il servizio clienti è eccezionale e mi hanno fornito consigli preziosi per la cura. Assolutamente raccomandato!</p>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://picsum.photos/seed/testimonial1/60/60.jpg" alt="Marco Rossi">
                        </div>
                        <div class="author-info">
                            <h4>Marco Rossi</h4>
                            <p>Architetto d'interni</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-controls">
                <span class="slider-dot active"></span>
                <span class="slider-dot"></span>
                <span class="slider-dot"></span>
            </div>
        </div>
    </section>
    
    <!-- Interview Section -->
    <section class="interview" id="interview">
        <div class="container">
            <div class="section-title fade-in">
                <h2>La Nostra Storia</h2>
            </div>
            <div class="interview-container fade-in">
                <div class="interview-story">
                    <h2>Dalla Passione all'Innovazione: Il Viaggio VerdeTech</h2>
                    
                    <p>"Tutto è iniziato in una piccola serra sul retro di casa mia," racconta Marco Giordano, fondatore di VerdeTech, mentre accarezza delicatamente una foglia di Monstera. "Era il 2008, e la mia passione per la botanica era già un'ossessione. Passavo ore a studiare le esigenze di ogni pianta, sperimentando tecniche colturali che nessuno aveva provato prima. Ma sentivo che c'era qualcosa di più che potevo fare."</p>
                    
                    <p>La visione di Marco era rivoluzionaria per l'epoca: unire la <span class="highlight">botanica tradizionale</span> con la <span class="highlight">tecnologia moderna</span>. "Vedevo le persone nelle città sempre più stressate, sempre più distaccate dalla natura. Volevo creare un ponte, un modo per portare il verde non solo come decorazione, ma come elemento fondamentale per il benessere psicofisico."</p>
                    
                    <p>I primi anni furono una sfida. Con un budget limitato e solo la sua determinazione come risorsa, Marco trasformò quella piccola serra in un laboratorio di innovazione. "Iniziai con piante comuni, ma le trattavo in modo diverso. Osservavo come reagivano a diverse condizioni di luce, umidità, nutrizione. Tenevo diari dettagliati, quasi come un ricercatore scientifico. Fu in quel periodo che sviluppai le prime tecniche che oggi definiamo 'VerdeTech'."</p>
                    
                    <p>La svolta arrivò nel 2015, quando conobbe Elena Rossi, una business manager con una passione segreta per il giardinaggio. "Quando entrai nella sua serra per la prima volta, rimasi sbalordita," ricorda Elena. "Non era solo un orto botanico, era un ecosistema perfettamente bilanciato, dove ogni elemento aveva uno scopo. Vidi subito il potenziale commerciale di quella visione."</p>
                    
                    <p>Insieme, Marco ed Elena fondarono ufficialmente VerdeTech. La loro sinergia fu immediata: la profonda conoscenza botanica di Marco si univa all'acume commerciale di Elena. "Ci siamo detti: non vogliamo solo vendere piante. Vogliamo vendere <span class="highlight">esperienze</span>, vogliamo educare le persone a prendersi cura del verde, vogliamo creare una community di amanti della natura."</p>
                    
                    <p>Oggi, VerdeTech è molto più di un'azienda di piante. È un centro di ricerca, un luogo di formazione, un punto di riferimento per chi cerca soluzioni verdi innovative. "Abbiamo sviluppato sistemi di irrigazione intelligenti, sensori che monitorano la salute delle piante in tempo reale, e persino un'app che aiuta i nostri clienti a prendersi cura delle loro piante," spiega Marco con orgoglio. "Ma la cosa di cui vado più fiero è la nostra squadra. Ogni persona che lavora qui condivide la stessa passione, la stessa dedizione."</p>
                    
                    <p>Guardando al futuro, i sogni di Marco ed Elena non si fermano. "Stiamo lavorando su progetti di giardinaggio verticale per grattacieli, su sistemi di coltivazione idroponica domestica, e persino su partnership con scuole per educare le nuove generazioni all'importanza del verde," conclude Elena. "VerdeTech non è la nostra azienda, è la nostra missione. E ogni giorno, cerchiamo di renderla un po' più grande."</p>
                </div>
            </div>
            
            <!-- Founder & Manager Info Section -->
            <div class="founder-info fade-in">
                <div class="founder-details">
                    <h3>Marco Giordano</h3>
                    <p class="founder-role">Fondatore & Direttore Botanico</p>
                    
                    <div class="competencies">
                        <div class="competency-item">
                            <i class="fas fa-graduation-cap"></i>
                            <div>
                                <h4>Formazione</h4>
                                <p>Laurea in Scienze Agrarie, Specializzazione in Botanica Tropicale</p>
                            </div>
                        </div>
                        
                        <div class="competency-item">
                            <i class="fas fa-microscope"></i>
                            <div>
                                <h4>Competenze Tecniche</h4>
                                <p>Coltivazione di piante esotiche, Tecniche bonsai avanzate, Sistemi di irrigazione intelligenti</p>
                            </div>
                        </div>
                        
                        <div class="competency-item">
                            <i class="fas fa-award"></i>
                            <div>
                                <h4>Riconoscimenti</h4>
                                <p>Premio Innovazione Verde 2021, Certificazione Internazionale Bonsai Master</p>
                            </div>
                        </div>
                        
                        <div class="competency-item">
                            <i class="fas fa-heart"></i>
                            <div>
                                <h4>Filosofia</h4>
                                <p>"La natura non è una risorsa da sfruttare, ma un partner con cui collaborare"</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="founder-image">
                    <img src="https://images.unsplash.com/photo-1728762213792-2a77ade41c02?" alt="Marco Giordano - Fondatore VerdeTech">
                    <div class="experience-badge">
                        <span class="years">15+</span>
                        <span class="label">Anni di Esperienza</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Video Tour Section -->
    <section class="video-tour" id="video-tour">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Tour Guidato nella Nostra Serra</h2>
            </div>
            <div class="video-container fade-in">
                <div class="video-placeholder">
                    <div class="play-button">
                        <i class="fas fa-play-circle"></i>
                    </div>
                    <div class="video-info">
                        <h3>Scopri il Mondo VerdeTech</h3>
                        <p>Un percorso esclusivo attraverso le nostre aree specializzate</p>
                    </div>
                </div>
                
                <div class="tour-steps">
                    <div class="tour-step">
                        <div class="step-number">1</div>
                        <div class="step-icon">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <div class="step-text">
                            <h4>Area Propagazione</h4>
                            <p>Dove nasce ogni pianta</p>
                        </div>
                    </div>
                    <div class="tour-step">
                        <div class="step-number">2</div>
                        <div class="step-icon">
                            <i class="fas fa-sun"></i>
                        </div>
                        <div class="step-text">
                            <h4>Serra Tropicale</h4>
                            <p>Il cuore della nostra collezione esotica</p>
                        </div>
                    </div>
                    <div class="tour-step">
                        <div class="step-number">3</div>
                        <div class="step-icon">
                            <i class="fas fa-tree"></i>
                        </div>
                        <div class="step-text">
                            <h4>Laboratorio Bonsai</h4>
                            <p>L'arte della miniaturizzazione</p>
                        </div>
                    </div>
                    <div class="tour-step">
                        <div class="step-number">4</div>
                        <div class="step-icon">
                            <i class="fas fa-palette"></i>
                        </div>
                        <div class="step-text">
                            <h4>Showroom Design</h4>
                            <p>Ispirazione per il tuo spazio verde</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq" id="faq">
        <div class="container">
            <div class="section-title fade-in">
                <h2>FAQ</h2>
            </div>
            <div class="faq-container fade-in">
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Quali sono i benefici reali delle piante esotiche per la salute?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Le piante esotiche offrono numerosi benefici per la salute: purificano l'aria rimuovendo tossine come formaldeide e benzene, aumentano i livelli di umidità riducendo problemi respiratori, migliorano l'umore e riducono lo stress, aumentano la produttività e la concentrazione, e possono anche ridurre il rumore ambientale creando un'atmosfera più tranquilla.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Quanto tempo è necessario per curare un bonsai?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>La cura di un bonsai richiede impegno costante ma non necessariamente molto tempo. In media, bastano 10-15 minuti al giorno per controllare l'umidità del terreno e osservare la pianta, più circa 30-60 minuti a settimana per potature, concimazioni e trattamenti specifici. È più una questione di costanza e attenzione che di tempo effettivo.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Le vostre fioriere sono adatte anche per balconi piccoli?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, offriamo una vasta gamma di fioriere progettate specificamente per spazi ridotti. Le nostre soluzioni includono fioriere verticali, moduli componibili e sistemi sospesi che ottimizzano lo spazio verticale, permettendoti di creare un piccolo giardino anche su balconi di pochi metri quadrati.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Offrite sconti per ordini all'ingrosso?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, abbiamo un programma dedicato per clienti professionali, negozi, architetti e paesaggisti. Offriamo sconti progressivi basati sul volume dell'ordine, consulenza personalizzata e supporto tecnico. Contatta il nostro team commerciale per ricevere un catalogo specifico e un preventivo personalizzato.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Come garantite la sopravvivenza delle piante durante la spedizione?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Utilizziamo imballaggi speciali progettati per proteggere le piante durante il trasporto. Ogni pianta viene accuratamente imballata con materiali che mantengono l'umidità e proteggono foglie e radici. Le spedizioni sono assicurate e in caso di danni durante il trasporto, provvediamo immediatamente alla sostituzione.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Quali piante sono più adatte per chi non ha il pollice verde?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Per chi è alle prime armi, raccomandiamo piante resistenti come Sansevieria, Zamioculcas, Pothos, e alcune varietà di Ficus. Queste piante richiedono poche cure, tollerano errori di irrigazione e si adattano bene a diverse condizioni di luce. Il nostro team può consigliarti la pianta perfetta in base alle tue abitudini e all'ambiente in cui vivi.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Offrite un servizio di manutenzione post-vendita?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, offriamo un servizio completo di manutenzione per clienti privati e aziendali. I nostri esperti possono intervenire periodicamente per potature, concimazioni, trattamenti fitosanitari e riporti. Inoltre, forniamo una guida dettagliata per ogni pianta acquistata e il nostro servizio clienti è sempre disponibile per rispondere a qualsiasi dubbio sulla cura delle tue piante.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- CTA Section -->
    <section class="cta">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Pronto a Trasformare il Tuo Spazio?</h2>
            </div>
            <p>Unisciti ai migliaia di clienti che hanno già scelto VerdeTech per portare la natura nella loro vita.</p>
            <div class="cta-buttons fade-in">
                <a href="#contact" class="btn btn-cta">Richiedi una Consulenza</a>
                <a href="#products" class="btn btn-cta">Scopri il Catalogo</a>
            </div>
        </div>
    </section>
    
    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Contattaci</h2>
            </div>
            <div class="contact-content">
                <div class="contact-info fade-in">
                    <h3>Informazioni di Contatto</h3>
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <h4>Indirizzo</h4>
                            <p>Via della Natura, 123<br>20121 Milano, Italia</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <div>
                            <h4>Telefono</h4>
                            <p>+39 02 12345678</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <h4>Email</h4>
                            <p>info@verdetch.it</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-clock"></i>
                        <div>
                            <h4>Orari di Apertura</h4>
                            <p>Lunedì - Venerdì: 9:00 - 18:00<br>Sabato: 9:00 - 13:00<br>Domenica: Chiuso</p>
                        </div>
                    </div>
                </div>
                <div class="contact-form fade-in">
                    <h3>Invia un Messaggio</h3>
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name">Nome e Cognome</label>
                            <input type="text" id="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Telefono</label>
                            <input type="tel" id="phone" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="where">Dove ci hai conosciuto?</label>
                            <select id="where" class="form-control" required>
                                <option value="" selected disabled>Seleziona un'opzione</option>
                                <option value="google">Google / Motore di ricerca</option>
                                <option value="social">Social Media (Facebook, Instagram, etc.)</option>
                                <option value="friend">Amico / Parente</option>
                                <option value="advert">Pubblicità online</option>
                                <option value="other">Altro</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="plant-interest">Quale tipo di piante ti interessa?</label>
                            <select id="plant-interest" class="form-control" required>
                                <option value="" selected disabled>Seleziona un'opzione</option>
                                <option value="exotic">Piante Esotiche</option>
                                <option value="bonsai">Bonsai</option>
                                <option value="planters">Fioriere Design</option>
                                <option value="collections">Collezioni Speciali</option>
                                <option value="advice">Consulenza personalizzata</option>
                                <option value="not-sure">Non sono sicuro, ho bisogno di consigli</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="subject">Oggetto</label>
                            <input type="text" id="subject" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Messaggio</label>
                            <textarea id="message" class="form-control" required></textarea>
                        </div>
                        <button type="submit" class="btn">Invia Messaggio</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>VerdeTech</h3>
                    <p>Natura e tecnologia per spazi unici. Trasformiamo ogni ambiente in un'oasi di benessere attraverso il potere delle piante.</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-twitter"></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 class="footer-links">
                        <li><a href="#about">Chi Siamo</a></li>
                        <li><a href="#product-month">Offerte</a></li>
                        <li><a href="#products">Prodotti</a></li>
                        <li><a href="#benefits">Benefici</a></li>
                        <li><a href="#testimonials">Testimonianze</a></li>
                        <li><a href="#interview">Intervista</a></li>
                        <li><a href="#faq">FAQ</a></li>
                        <li><a href="#contact">Contatti</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Categorie Prodotti</h3>
                    <ul class="footer-links">
                        <li><a href="#">Piante Esotiche</a></li>
                        <li><a href="#">Bonsai</a></li>
                        <li><a href="#">Fioriere Design</a></li>
                        <li><a href="#">Collezioni Speciali</a></li>
                        <li><a href="#">Kit per Principianti</a></li>
                        <li><a href="#">Accessori</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Iscriviti alla nostra newsletter per ricevere consigli esclusivi, offerte speciali e rimanere aggiornato sulle novità.</p>
                    <form class="newsletter-form">
                        <input type="email" placeholder="La tua email" required>
                        <button type="submit"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 VerdeTech - Orto Botanico. Tutti i diritti riservati. | P.IVA 12345678901 | Privacy Policy | Termini e Condizioni</p>
            </div>
        </div>
    </footer>
    
    <script>
        // Loader
        window.addEventListener('load', function() {
            setTimeout(function() {
                document.getElementById('loader').classList.add('hidden');
            }, 1000);
        });
        
        // Sticky Header
        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
        const menuToggle = document.getElementById('menuToggle');
        const mainNav = document.getElementById('mainNav');
        
        menuToggle.addEventListener('click', function() {
            mainNav.classList.toggle('active');
            
            // Change icon
            const icon = this.querySelector('i');
            if (icon.classList.contains('fa-bars')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });
        
        // Close mobile menu when clicking on a link
        document.querySelectorAll('.main-nav a').forEach(link => {
            link.addEventListener('click', function() {
                mainNav.classList.remove('active');
                const icon = menuToggle.querySelector('i');
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            });
        });
        
        // Smooth Scrolling
        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) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 70,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Fade In Animation on Scroll
        const fadeElements = document.querySelectorAll('.fade-in');
        
        function checkFade() {
            fadeElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('visible');
                }
            });
        }
        
        window.addEventListener('scroll', checkFade);
        window.addEventListener('load', checkFade);
        
        // Animated Counter for Marketing Metrics
        function animateCounter() {
            const counters = document.querySelectorAll('.metric-value');
            const speed = 200;
            
            counters.forEach(counter => {
                const animate = () => {
                    const value = +counter.getAttribute('data-target');
                    const data = +counter.innerText;
                    const time = value / speed;
                    
                    if (data < value) {
                        counter.innerText = Math.ceil(data + time);
                        setTimeout(animate, 1);
                    } else {
                        counter.innerText = value;
                    }
                }
                
                // Start animation when element is in viewport
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            animate();
                            observer.unobserve(entry.target);
                        }
                    });
                });
                
                observer.observe(counter);
            });
        }
        
        animateCounter();
        
        // Products Data
        const productsData = {
            exotic: [
                {
                    name: "Monstera Deliciosa",
                    description: "La pianta tropicale più amata per le sue foglie uniche e scenografiche.",
                    price: "€45,00",
                    image: "https://plus.unsplash.com/premium_photo-1739452120318-bd7ebd7c7616?"
                },
                {
                    name: "Ficus Lyrata",
                    description: "Con le sue grandi foglie a forma di violino, è perfetta per creare un'impatto visivo.",
                    price: "€65,00",
                    image: "https://images.unsplash.com/photo-1485955900006-10f4d324d411?"
                },
                {
                    name: "Calathea Ornata",
                    description: "Famosa per le sue foglie decorate con striature rosa e bianche.",
                    price: "€35,00",
                    image: "https://images.unsplash.com/photo-1522481131200-6e44c03e897c?"
                },
                {
                    name: "Bird of Paradise",
                    description: "Con i suoi fiori esotici a forma di uccello, porta un tocco tropicale in ogni ambiente.",
                    price: "€55,00",
                    image: "https://images.unsplash.com/photo-1597433817216-2b7320b739b5?"
                },
                {
                    name: "Alocasia Polly",
                    description: "Foglie a forma di freccia con venature prominenti, un vero gioiello botanico.",
                    price: "€40,00",
                    image: "https://plus.unsplash.com/premium_photo-1663126506993-00e288b94dea?"
                },
                {
                    name: "Philodendron Pink Princess",
                    description: "Una varietà rara con splendide macchie rosa sulle foglie scure.",
                    price: "€120,00",
                    image: "https://images.unsplash.com/photo-1578860043426-4235a6b8a9f0?"
                }
            ],
            bonsai: [
                {
                    name: "Bonsai Ficus Ginseng",
                    description: "Ideale per principianti, con le sue radici aeree affascinanti.",
                    price: "€75,00",
                    image: "https://images.unsplash.com/photo-1585859668241-90b6c7066e0b?"
                },
                {
                    name: "Bonsai Carmona",
                    description: "Con i suoi piccoli fiori bianchi, è una vera gioia per gli occhi.",
                    price: "€85,00",
                    image: "https://images.unsplash.com/photo-1628662579383-8d9b541c5f1b?"
                },
                {
                    name: "Bonsai Ulivo",
                    description: "Simbolo di pace e longevità, perfetto per interni ed esterni.",
                    price: "€95,00",
                    image: "https://images.unsplash.com/photo-1596724688665-92976a3768a5?"
                },
                {
                    name: "Bonsai Acero Giapponese",
                    description: "Con le sue foglie che cambiano colore con le stagioni, è un'opera d'arte vivente.",
                    price: "€120,00",
                    image: "https://images.unsplash.com/photo-1545093149-618ce3bcf49d?"
                },
                {
                    name: "Bonsai Juniperus",
                    description: "Un classico senza tempo, con foglie aghi e un aspetto maestoso.",
                    price: "€110,00",
                    image: "https://images.unsplash.com/photo-1585326429363-6d8b637f0e0e?"
                },
                {
                    name: "Bonsai Ginkgo Biloba",
                    description: "Antico e affascinante, con le sue characteristiche foglie a ventaglio.",
                    price: "€130,00",
                    image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?"
                }
            ],
            planters: [
                {
                    name: "Fioriera Sospesa Air",
                    description: "Design minimalista e materiali sostenibili per un giardino verticale elegante.",
                    price: "€40,00",
                    image: "https://images.unsplash.com/photo-1595855348250-56a4940a7994?"
                },
                {
                    name: "Fioriera Modulare Geo",
                    description: "Sistema componibile che permette di creare composizioni uniche.",
                    price: "€55,00",
                    image: "https://images.unsplash.com/photo-1587049352846-4a222e784d38?"
                },
                {
                    name: "Fioriera Smart Tech",
                    description: "Con sistema di irrigazione automatico e sensori per monitorare la salute della pianta.",
                    price: "€120,00",
                    image: "https://images.unsplash.com/photo-1602934657432-1756f1bb9c6e?"
                },
                {
                    name: "Fioriera Terracotta Art",
                    description: "Fatta a mano con tecniche tradizionali, ogni pezzo è unico.",
                    price: "€65,00",
                    image: "https://images.unsplash.com/photo-1589368619219-5a3655cf2eea?"
                },
                {
                    name: "Set Fioriere da Parete",
                    description: "Crea un muro verde con questo set di 3 fioriere modulari.",
                    price: "€90,00",
                    image: "https://images.unsplash.com/photo-1628628390836-c9e4e5f1d53b?"
                },
                {
                    name: "Fioriera Autogrigante",
                    description: "Perfetta per balconi e terrazzi, con sistema di drenaggio avanzato.",
                    price: "€75,00",
                    image: "https://images.unsplash.com/photo-1595485506936-8642194c46d6?"
                }
            ],
            collections: [
                {
                    name: "Kit Benessere Ufficio",
                    description: "Selezione di piante che purificano l'aria e aumentano la produttività.",
                    price: "€120,00",
                    image: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?"
                },
                {
                    name: "Collezione Purificante",
                    description: "Piante selezionate per massimizzare la purificazione dell'aria in casa.",
                    price: "€95,00",
                    image: "https://images.unsplash.com/photo-1446069879619-0a0417d111b4?"
                },
                {
                    name: "Set Relax per Camera",
                    description: "Piante che migliorano la qualità del sonno e creano un'atmosfera rilassante.",
                    price: "€85,00",
                    image: "https://images.unsplash.com/photo-1485955900006-10f4d324d411?"
                },
                {
                    name: "Collezione Bonsai Premium",
                    description: "Selezione esclusiva dei nostri bonsai più pregiati con accessori professionali.",
                    price: "€250,00",
                    image: "https://images.unsplash.com/photo-1585859668241-90b6c7066e0b?"
                },
                {
                    name: "Kit Giardino Erboso",
                    description: "Tutto il necessario per coltivare le tue erbe aromatiche preferite in casa.",
                    price: "€70,00",
                    image: "https://images.unsplash.com/photo-1589914176292-c5581a550797?"
                },
                {
                    name: "Collezione Piante Grasse",
                    description: "Selezione di piante succulente facili da curare e di grande impatto estetico.",
                    price: "€60,00",
                    image: "https://images.unsplash.com/photo-1459411621453-7b03977f4bfc?"
                }
            ]
        };
        
        // Load Products
        function loadProducts(category) {
            const productsGrid = document.getElementById('productsGrid');
            productsGrid.innerHTML = '';
            
            // Add loading animation
            productsGrid.innerHTML = '<div class="loading-spinner"><i class="fas fa-spinner fa-spin"></i></div>';
            
            // Simulate loading delay for better UX
            setTimeout(() => {
                productsGrid.innerHTML = '';
                
                productsData[category].forEach((product, index) => {
                    const productCard = document.createElement('div');
                    productCard.className = 'product-card fade-in';
                    productCard.style.animationDelay = `${index * 0.1}s`;
                    
                    productCard.innerHTML = `
                        <div class="product-image">
                            <img src="${product.image}" alt="${product.name}" loading="lazy">
                            <div class="product-overlay"></div>
                        </div>
                        <div class="product-info">
                            <h3>${product.name}</h3>
                            <p>${product.description}</p>
                            <div class="product-price">${product.price}</div>
                            <button class="btn" data-product="${product.name}" data-price="${product.price}">Aggiungi al Carrello</button>
                        </div>
                    `;
                    
                    productsGrid.appendChild(productCard);
                });
                
                // Add event listeners to the new buttons
                document.querySelectorAll('.product-card .btn').forEach(button => {
                    button.addEventListener('click', function() {
                        const productName = this.getAttribute('data-product');
                        const productPrice = this.getAttribute('data-price');
                        
                        // Create notification
                        const notification = document.createElement('div');
                        notification.className = 'product-notification';
                        notification.innerHTML = `
                            <div class="notification-content">
                                <i class="fas fa-check-circle"></i>
                                <p>${productName} aggiunto al carrello!</p>
                            </div>
                        `;
                        
                        document.body.appendChild(notification);
                        
                        // Show notification
                        setTimeout(() => {
                            notification.classList.add('show');
                        }, 100);
                        
                        // Remove notification after 3 seconds
                        setTimeout(() => {
                            notification.classList.remove('show');
                            setTimeout(() => {
                                document.body.removeChild(notification);
                            }, 300);
                        }, 3000);
                    });
                });
                
                // Re-check fade elements
                setTimeout(checkFade, 100);
            }, 500);
        }
        
        // Add CSS for product notification
        const notificationStyles = document.createElement('style');
        notificationStyles.innerHTML = `
            .product-notification {
                position: fixed;
                top: 100px;
                right: -300px;
                background: white;
                padding: 15px 20px;
                border-radius: 10px;
                box-shadow: var(--shadow-heavy);
                z-index: 1000;
                transition: right 0.3s ease;
                display: flex;
                align-items: center;
            }
            
            .product-notification.show {
                right: 20px;
            }
            
            .notification-content {
                display: flex;
                align-items: center;
            }
            
            .notification-content i {
                color: var(--primary-color);
                font-size: 24px;
                margin-right: 15px;
            }
            
            .loading-spinner {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 200px;
                color: var(--primary-color);
                font-size: 2rem;
            }
        `;
        document.head.appendChild(notificationStyles);
        
        // Tab Functionality
        const tabButtons = document.querySelectorAll('.tab-btn');
        
        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                tabButtons.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button
                this.classList.add('active');
                
                // Load products for the selected category
                const category = this.getAttribute('data-tab');
                loadProducts(category);
            });
        });
        
        // Load initial products
        loadProducts('exotic');
        
        // Countdown Timer
        function updateCountdown() {
            const now = new Date().getTime();
            // Set the countdown date to 3 days from now
            const countDownDate = new Date().getTime() + (3 * 24 * 60 * 60 * 1000);
            
            const distance = countDownDate - 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) {
                clearInterval(countdownInterval);
                document.getElementById("countdown").innerHTML = "<h3>Offerta Scaduta</h3>";
            }
        }
        
        const countdownInterval = setInterval(updateCountdown, 5000);
        updateCountdown(); // Run immediately
        
        // Simulate stock decrease
        let stockCount = 7;
        setInterval(() => {
            if (stockCount > 1 && Math.random() > 0.7) {
                stockCount--;
                document.getElementById('stockCount').innerText = stockCount;
            }
        }, 15000); // Every 15 seconds, with some randomness

        // FAQ Accordion
        const faqItems = document.querySelectorAll('.faq-item');
        
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            
            question.addEventListener('click', function() {
                // Close all other items
                faqItems.forEach(otherItem => {
                    if (otherItem !== item) {
                        otherItem.classList.remove('active');
                    }
                });
                
                // Toggle current item
                item.classList.toggle('active');
            });
        });
        
        // Testimonial Slider
        const testimonials = [
            {
                text: "Ho acquistato diverse piante esotiche da VerdeTech e sono rimasto sbalordito dalla qualità e dalla salute delle piante ricevute. Il servizio clienti è eccezionale e mi hanno fornito consigli preziosi per la cura. Assolutamente raccomandato!",
                author: "Marco Rossi",
                role: "Architetto d'interni",
                image: "https://picsum.photos/seed/testimonial1/60/60.jpg"
            },
            {
                text: "Come paesaggista, lavoro con molti fornitori, ma VerdeTech è senza dubbio il migliore. La qualità dei loro bonsai è impareggiabile e la loro conoscenza botanica mi ha aiutato a realizzare progetti unici per i miei clienti.",
                author: "Laura Bianchi",
                role: "Paesaggista",
                image: "https://picsum.photos/seed/testimonial2/60/60.jpg"
            },
            {
                text: "Le fioriere design di VerdeTech hanno trasformato completamente il mio balcone. Ora ho un piccolo giardino verticale che è l'invidia di tutti i miei vicini. La qualità dei materiali e il design innovativo sono fantastici!",
                author: "Giulia Conti",
                role: "Interior Designer",
                image: "https://picsum.photos/seed/testimonial3/60/60.jpg"
            }
        ];
        
        let currentTestimonial = 0;
        const testimonialElement = document.querySelector('.testimonial');
        const dots = document.querySelectorAll('.slider-dot');
        
        function showTestimonial(index) {
            const testimonial = testimonials[index];
            testimonialElement.innerHTML = `
                <p class="testimonial-text">${testimonial.text}</p>
                <div class="testimonial-author">
                    <div class="author-image">
                        <img src="${testimonial.image}" alt="${testimonial.author}">
                    </div>
                    <div class="author-info">
                        <h4>${testimonial.author}</h4>
                        <p>${testimonial.role}</p>
                    </div>
                </div>
            `;
            
            // Update dots
            dots.forEach((dot, i) => {
                if (i === index) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
        }
        
        // Dot click functionality
        dots.forEach((dot, index) => {
            dot.addEventListener('click', function() {
                currentTestimonial = index;
                showTestimonial(currentTestimonial);
            });
        });
        
        // Auto-rotate testimonials
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            showTestimonial(currentTestimonial);
        }, 5000);
        
        // Video Placeholder Click Handler
        document.querySelector('.video-placeholder').addEventListener('click', function() {
            // In a real implementation, this would open a video modal or redirect to a video page
            alert('Il video del tour guidato sarà disponibile presto!');
        });
        
        // Contact Form
        const contactForm = document.getElementById('contactForm');
        
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const phone = document.getElementById('phone').value;
            const where = document.getElementById('where').value;
            const plantInterest = document.getElementById('plant-interest').value;
            const subject = document.getElementById('subject').value;
            const message = document.getElementById('message').value;
            
            // Here you would normally send the data to a server
            // For this example, we'll just show a success message
            alert(`Grazie ${name}! Il tuo messaggio è stato inviato con successo. Ti risponderemo quanto prima.`);
            
            // Reset form
            contactForm.reset();
        });
        
        // Newsletter Form
        const newsletterForm = document.querySelector('.newsletter-form');
        
        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const email = this.querySelector('input[type="email"]').value;
            
            // Here you would normally send the data to a server
            // For this example, we'll just show a success message
            alert(`Grazie per esserti iscritto alla nostra newsletter! Riceverai presto notizie e offerte esclusive a ${email}.`);
            
            // Reset form
            this.reset();
        });
    </script>
</body>
</html>