TechForge | Riparazioni e Stampa 3D by @Darkness977 - Codewith.it

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

References

<p>Serve a definire paragrafi di testo
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<table>Tag primario per la creazione di tabelle
relServe a definire la relazione tra il documento e una risorsa.

Users

Log in to search for users

Explore

Find inspiration

ESERCIZIO 1.1 WEB

Pagina prova html Marianna

Lezione 3/11 pt.2

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>BrainForge | Riparazioni e Stampa 3D</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
</head>
<body>

    <header class="hero">
        <nav class="main-nav">
            <div class="nav-container">
                <a href="#" class="logo">BrainForge</a>
                <ul class="nav-links">
                    <li><a href="#servizi">Servizi</a></li>
                    <li><a href="#costi">Costi</a></li>
                    <li><a href="#stampanti">Stampanti</a></li>
                    <li><a href="#articoli">Articoli</a></li>
                    <li><a href="#chi-sono">Chi Sono</a></li>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="#contatti" class="cta-button">Contattami</a></li>
                </ul>
            </div>
        </nav>

        <!-- Contenitore per l'effetto di sfondo -->
        <div id="hero-bg-effect">
            <canvas id="particle-canvas"></canvas>
        </div>
        
        <div class="hero-content">
            <h1 class="hero-title fade-in">Dalla Riparazione PC alla <span class="accent">Creazione 3D</span>.</h1>
            <p class="hero-subtitle fade-in">Soluzioni su misura per il tuo hardware e prototipi unici con la stampa 3D. Il tuo tech, reinventato.</p>
            <a href="#servizi" class="hero-cta fade-in">Scopri i Servizi</a>
        </div>        
    </header>

    <main>
        <section id="chi-sono" class="about">
            <div class="container reveal">
                <div class="about-grid">
                    <div class="about-image">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Studentessa ingegnere al lavoro">
                    </div>
                    <div class="about-content">
                        <h2>Chi <span class="accent">Sono</span></h2>
                        <p>Sono una studentessa 23enne di  Torino, iscritta alla Facoltà di ingegneria con una passione smisurata per capire come funzionano le cose. Questa passione si è tradotta in due competenze concrete: la capacità di riparare e ottimizzare hardware computeristico e l'abilità di creare oggetti dal nulla con la stampa 3D.</p>
                        <p>Non vedo un computer guasto come un problema, ma come un puzzle da risolvere. Non vedo un file 3D come un semplice disegno, ma come il primo passo verso un oggetto tangibile. Il mio obiettivo è mettere questa curiosità e competenza al tuo servizio.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="servizi" class="services">
            <div class="container">
                <div class="section-header reveal">
                    <h2>I Miei <span class="accent">Servizi</span></h2>
                    <p>Competenza tecnica e passione per la tecnologia al tuo servizio.</p>
                </div>
                <div class="services-grid">
                    <div class="service-card reveal">
                        <div class="service-icon">?</div>
                        <h3>Riparazione Computer</h3>
                        <p>Diagnosi e riparazione hardware e software per PC e laptop. Risolvo problemi di lentezza, virus, guasti componenti e recupero dati, riportando il tuo computer al massimo delle prestazioni.</p>
                        <a href="#contatti" class="service-link">Chiedi un preventivo</a>
                    </div>
                    <div class="service-card reveal">
                        <div class="service-icon">?️</div>
                        <h3>Stampa 3D</h3>
                        <p>Realizzo prototipi funzionali, componenti di ricambio personalizzati e oggetti di design. Trasformo le tue idee in modelli 3D concreti, utilizzando materiali di alta qualità.</p>
                        <a href="#contatti" class="service-link">Richiedi un progetto</a>
                    </div>
                </div>
            </div>
        </section>

        <section id="costi" class="costs">
            <div class="container">
                <div class="section-header reveal">
                    <h2>Trasparenza sui <span class="accent">Costi</span></h2>
                    <p>Capire come viene formato il prezzo ti aiuta a fare la scelta giusta. Ecco una sintesi dei fattori che determinano il costo di un servizio di stampa 3D.</p>
                </div>
                <div class="cost-grid reveal">
                    <div class="cost-category">
                        <h3>? Servizi Professionali</h3>
                        <p>I costi variano in base al provider e alla complessità, ma generalmente si collocano in un range di <strong>6€ a 20€ all'ora</strong>. Questo prezzo include manodopera, ammortamento delle macchine e know-how tecnico.</p>
                    </div>
                    <div class="cost-category">
                        <h3>? Utilizzo Domestico</h3>
                        <p>Se stampi in casa, i costi principali sono l'elettricità e il materiale. Per una stampante standard, il consumo è di circa <strong>0.02€ all'ora</strong>. A questo si aggiunge il costo del filamento (es. PLA), che può essere di <strong>0.08€ - 0.20€ all'ora</strong> di stampa.</p>
                    </div>
                    <div class="cost-category">
                        <h3>⚙️ Fattori Chiave</h3>
                        <p>Il prezzo finale non è mai un solo numero. Dipende da:</p>
                        <ul>
                            <li><strong>Materiale:</strong> PLA, ABS, resina, metallo hanno costi molto diversi.</li>
                            <li><strong>Tempo di Stampa:</strong> Più tempo = più costo (energia e manodopera).</li>
                            <li><strong>Complessità:</strong> Modelli intricati richiedono più tempo e supporti.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="stampanti" class="printers">
            <div class="container">
                <div class="section-header reveal">
                    <h2>Le Mie <span class="accent">Stampanti di Punta</span></h2>
                    <p>Utilizzo tecnologia all'avanguardia per garantire risultati di altissima qualità.</p>
                </div>
                <div class="vertical-slider reveal">
                    <div class="slider-wrapper">
                        <div class="printer-slide">
                            <img src="https://eu.elegoo.com/cdn/shop/files/elegoo-mars-3-resin-3d-printer-1_grande.jpg?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Stampante Resina SLA">
                            <div class="slide-content">
                                <h4>Elegoo Mars 3 (Resina SLA)</h4>
                                <p>Perfetta per dettagli ultra-fini e modelli complessi. Ideale per prototipi di design, miniature e componenti meccanici di precisione.</p>
                            </div>
                        </div>
                        <div class="printer-slide">
                            <img src="https://images.unsplash.com/photo-1694898828036-cf4d95e80e58?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Stampante FDM">
                            <div class="slide-content">
                                <h4>Prusa i3 MK4 (FDM)</h4>
                                <p>Il cavallo di battaglia per la stampa funzionale. Affidabile, veloce e versatile, eccelle nella produzione di parti resistenti, prototipi rapidi e oggetti di uso quotidiano.</p>
                            </div>
                        </div>
                        <div class="printer-slide">
                            <img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Stampante Professionale">
                            <div class="slide-content">
                                <h4>Ultimaker S5 (Professionale)</h4>
                                <p>Per progetti che richiedono la massima affidabilità e precisione. Duale estrusione per materiali di supporto solubili e volume di stampa elevato per pezzi di grandi dimensioni.</p>
                            </div>
                        </div>
                    </div>
                    <button class="slider-button prev-button">‹</button>
                    <button class="slider-button next-button">›</button>
                </div>
            </div>
        </section>

        <section id="articoli" class="articles">
            <div class="container">
                <div class="section-header reveal">
                    <h2>Articoli di <span class="accent">Punta</span></h2>
                    <p>Approfondimenti e guide per esplorare il mondo della riparazione e della manifattura digitale.</p>
                </div>
                <div class="articles-grid">
                    <article class="article-card reveal">
                        <div class="article-img" style="background-image: url('https://images.unsplash.com/photo-1741517540162-451e3f5d6318?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                        <div class="article-content">
                            <h3>Guida alla Sostituzione RAM: Un Upgrade Veloce</h3>
                            <p>Aumenta la velocità del tuo PC in pochi passaggi. Una guida passo-passo per scegliere e installare la memoria RAM giusta per le tue esigenze.</p>
                            <a href="#" class="article-link">Leggi il resto →</a>
                        </div>
                    </article>
                    <article class="article-card reveal">
                        <div class="article-img" style="background-image: url('https://images.unsplash.com/photo-1702390600380-5dc2bb300025?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                        <div class="article-content">
                            <h3>I Materiali nella Stampa 3D: PLA, ABS o PETG?</h3>
                            <p>Qual è il filamento giusto per il tuo progetto? Analizziamo le caratteristiche, i pro e i contro dei materiali più comuni per fare la scelta migliore in base al progetto.</p>
                            <a href="#" class="article-link">Leggi il resto →</a>
                        </div>
                    </article>
                    <article class="article-card reveal">
                        <div class="article-img" style="background-image: url('https://images.unsplash.com/photo-1657653464178-b4dd0879df5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                        <div class="article-content">
                            <h3>Diagnostica di un PC che non si Accende</h3>
                            <p>Il tuo computer è morto? Non sempre. Segui questa checklist (in 10 punti) per identificare i componenti guasti e capire se vale la pena ripararlo.</p>
                            <a href="#" class="article-link">Leggi il resto →</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <section id="faq" class="faq">
            <div class="faq-container reveal">
                <div class="section-header">
                    <h2>Domande <span class="accent">Frequenti</span></h2>
                </div>
                <div class="faq-list">
                    <details class="faq-item">
                        <summary>Quanto tempo ci vuole per una riparazione?</summary>
                        <div class="faq-content">
                            <p>Dipende dalla complessità del problema. Per una diagnosi e una riparazione software (es. rimozione virus) servono 24-48 ore. Per riparazioni hardware che richiedono ordinazione di pezzi, i tempi possono variare da 3 a 7 giorni lavorativi.</p>
                        </div>
                    </details>
                    <details class="faq-item">
                        <summary>Posso stampare un oggetto da un file che ho già?</summary>
                        <div class="faq-content">
                            <p>Certo! Basta che tu mi invii il file .STL o .OBJ. Posso anche aiutarti a ottimizzare il modello per la stampa o a crearne uno da zero partendo da un'idea o un disegno.</p>
                        </div>
                    </details>
                    <details class="faq-item">
                        <summary>Offrite assistenza anche a distanza?</summary>
                        <div class="faq-content">
                            <p>Sì, per molti problemi software (installazione programmi, configurazioni, rimozione virus) posso offrire assistenza remota sicura e veloce, così non devi nemmeno muoverti da casa.</p>
                        </div>
                    </details>
                    <details class="faq-item">
                        <summary>Come viene calcolato il prezzo per un progetto 3D?</summary>
                        <div class="faq-content">
                            <p>Il prezzo è una combinazione di tre fattori principali: il costo del materiale utilizzato, il tempo di stampa richiesto e la complessità del modello (che include la preparazione del file e la post-produzione). Ti fornirò sempre un preventivo dettagliato prima di iniziare.</p>
                        </div>
                    </details>
                    <details class="faq-item">
                        <summary>Qual è il materiale più economico per la stampa 3D?</summary>
                        <div class="faq-content">
                            <p>Generalmente, il PLA (Polylactic Acid) è il materiale più economico e versatile, ideale per prototipi, oggetti decorativi e modelli che non richiedono un'elevata resistenza al calore o agli urti.</p>
                        </div>
                    </details>
                    <details class="faq-item">
                        <summary>Qual è la differenza tra una stampante FDM e una a resina (SLA)?</summary>
                        <div class="faq-content">
                            <p>Le stampanti FDM (come la Prusa) costruiscono l'oggetto strato su strato con un filamento fuso. Sono veloci, economiche e ideali per parti funzionali. Le stampanti SLA (come la Elegoo Mars) usano una resina fotosensibile solidificata da un laser. Sono più lente e costose, ma offrono dettagli finissimi e superfici lisce, perfette per miniature e modelli estetici.</p>
                        </div>
                    </details>
                    <details class="faq-item">
                        <summary>La stampante 3D è ecologica?</summary>
                        <div class="faq-content">
                            <p>Può esserlo. Molti filamenti, come il PLA, sono biodegradabili e derivanti da risorse rinnovabili (come l'amido di mais). Inoltre, la stampa 3D permette di produrre solo ciò che serve, riducendo gli sprechi di materiale rispetto ai metodi di produzione tradizionali.</p>
                        </div>
                    </details>
                </div>
            </div>
        </section>

        <section id="contatti" class="contact">
            <div class="contact-container reveal">
                <div class="section-header">
                    <h2>Contattami</h2>
                    <p>Hai un progetto in mente o il tuo computer ha un problema? Scrivimi, troveremo insieme la soluzione.</p>
                </div>
                <form class="contact-form" action="https://formspree.io/f/IL_TUO_URL_UNIVOCO" method="POST">
                    <div class="form-group">
                        <input type="text" id="name" name="name" placeholder="Il tuo nome" required>
                        <input type="email" id="email" name="email" placeholder="La tua email" required>
                    </div>
                    <input type="text" id="subject" name="subject" placeholder="Oggetto (es. Riparazione PC, Progetto 3D)">
                    <textarea id="message" name="message" placeholder="Descrivi la tua richiesta..." rows="6" required></textarea>
                    <button type="submit" class="cta-button">Invia Messaggio</button>
                </form>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <div class="footer-col">
                <h3>BrainForge</h3>
                <p>Dalla riparazione alla creazione. Il tuo tech, reinventato.</p>
            </div>
            <div class="footer-col">
                <h4>Link Rapidi</h4>
                <ul>
                    <li><a href="#servizi">Servizi</a></li>
                    <li><a href="#costi">Costi</a></li>
                    <li><a href="#articoli">Articoli</a></li>
                    <li><a href="#chi-sono">Chi Sono</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Servizi</h4>
                <ul>
                    <li><a href="#servizi">Riparazione Computer</a></li>
                    <li><a href="#servizi">Stampa 3D</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Seguimi</h4>
                <div class="social-links">
                    <a href="#" aria-label="LinkedIn">LinkedIn</a>
                    <a href="#" aria-label="GitHub">GitHub</a>
                    <a href="#" aria-label="Instagram">Instagram</a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 BrainForge. Progettato con passione e codice.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

:root {
    --bg-dark: #0d1117;
    --bg-light: #161b22;
    --bg-card: #21262d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --accent-color: #00f2fe; /* Azzurro elettrico */
    --font-sans: 'Poppins', sans-serif;
    --font-heading: 'Space Grotesk', sans-serif;
}

/* --- REGOLE PER IL CANVAS --- */
#particle-canvas {
    width: 100%;
    height: 100%;
    display: block; /* Rimuove eventuali spazi extra sotto il canvas */
}

/* --- REGOLE PER LA STRATIFICAZIONE --- */
#hero-bg-effect {
  
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* <-- LO MANDA INDIETRO, DIETRO A TUTTO */
}


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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
}

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

/* --- Typography --- */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }

p {
    color: var(--text-secondary);
    font-size: 1rem;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* --- Navigation --- */
.main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(13, 17, 23, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bg-card);
    padding: 1rem 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--text-primary);
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a { color: var(--text-primary); font-weight: 400; }
.nav-links a:hover { color: var(--accent-color); }

.cta-button {
    background-color: var(--accent-color);
    color: var(--bg-dark);
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 242, 254, 0.3);
}

/* --- Hero Section (Full Width) --- */
.hero {
  
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(rgba(13, 17, 23, 0.7), rgba(13, 17, 23, 0.7)), url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80') no-repeat center center/cover;
}

.hero-content { max-width: 800px; }
.hero-title { margin-bottom: 1rem; }
.hero-subtitle { max-width: 600px; margin: 1.5rem auto 2.5rem; }
/* --- AGGIUNGI QUESTE NUOVE REGOLE QUI (o in un punto simile) --- */
#hero-bg-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Lo manda indietro, dietro a tutto */
}

#particle-canvas {
    width: 100%;
    height: 100%;
    display: block;
}



.hero-cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.hero-cta:hover {
    background-color: var(--accent-color);
    color: var(--bg-dark);
}

/* --- Reveal Animations --- */
.reveal, .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.is-visible, .fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal.is-visible { transition-delay: var(--delay); }

/* --- Sections --- */
.services, .articles, .about, .contact {
    padding: 6rem 0;
}
.services { background-color: var(--bg-light); }
.about { background-color: var(--bg-light); }

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}
.section-header h2 { margin-bottom: 0.5rem; }

/* --- Services & Articles Grid (Full Width) --- */
.services-grid, .articles-grid {
    display: grid;
    gap: 2rem;
}
.services-grid { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.articles-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.service-card, .article-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid #30363d;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.service-card:hover, .article-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}
.service-icon { font-size: 3rem; margin-bottom: 1rem; }
.service-card h3, .article-content h3 { margin-bottom: 1rem; }
.service-link, .article-link { font-weight: 600; display: inline-block; margin-top: 1rem; }

.article-img {
    height: 200px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    margin-bottom: 1.5rem;
}

/* --- About Section (Full Width) --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.about-image img {
    width: 100%;
    border-radius: 12px;
}
.about-content p { margin-bottom: 1.5rem; font-size: 1.1rem; }

/* --- FAQ Section (850px max-width) --- */
.faq {
    padding: 6rem 0;
    background-color: var(--bg-light);
}
.faq-container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 2rem;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.faq-item {
    background-color: var(--bg-card);
    border: 1px solid #30363d;
    border-radius: 8px;
    overflow: hidden;
}
.faq-item summary {
    padding: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-content {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid #30363d;
}

/* --- Contact Section (900px max-width) --- */
.contact-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}
.form-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.contact-form input,
.contact-form textarea {
    background-color: var(--bg-card);
    border: 1px solid #30363d;
    padding: 1rem;
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-sans);
}
.contact-form button {
    align-self: center;
    margin-top: 1rem;
}

/* ... (stili precedenti rimangono invariati) ... */

/* --- NUOVA SEZIONE COSTI --- */
.costs {
    padding: 6rem 0;
    background-color: var(--bg-light);
}
.cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.cost-category {
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #30363d;
}
.cost-category h3 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
}
.cost-category ul {
    list-style: none;
    padding-left: 0;
}
.cost-category ul li {
    margin-bottom: 0.5rem;
}
.cost-category ul li::before {
    content: '→';
    color: var(--accent-color);
    margin-right: 0.5rem;
}

/* --- NUOVA SEZIONE CAROUSEL STAMPANTI --- */
.printers {
    padding: 6rem 0;
}
.vertical-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    height: 500px;
    overflow: hidden;
    border-radius: 15px;
    background-color: var(--bg-card);
    border: 1px solid #30363d;
}
.slider-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}
.printer-slide {
    min-height: 100%;
    display: flex;
    align-items: center;
    padding: 2rem;
}
.printer-slide img {
    width: 50%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 2rem;
}
.slide-content {
    width: 50%;
}
.slide-content h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 242, 254, 0.2);
    color: var(--text-primary);
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    z-index: 10;
}
.slider-button:hover {
    background-color: var(--accent-color);
    color: var(--bg-dark);
}
.prev-button { left: 1rem; }
.next-button { right: 1rem; }

/* ... (stili successivi rimangono invariati) ... */

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .services-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; text-align: center; }
    .form-group { grid-template-columns: 1fr; }
    
    /* Responsive per lo slider */
    .vertical-slider { height: auto; }
    .slider-wrapper { flex-direction: row; }
    .printer-slide {
        flex-direction: column;
        min-width: 100%;
        text-align: center;
    }
    .printer-slide img {
        width: 80%;
        height: 200px;
        margin-right: 0;
        margin-bottom: 1rem;
    }
    .slide-content { width: 100%; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-container { justify-content: center; }
    
    .services, .articles, .about, .contact, .faq, .costs, .printers { padding: 4rem 0; }
    
    footer .container {
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }
    .footer-col:first-child { grid-column: span 2; }
}

@media (max-width: 480px) {
    footer .container { grid-template-columns: 1fr; }
    .footer-col:first-child { grid-column: span 1; }
}

/* --- Footer (4 Columns) --- */
footer {
    background-color: var(--bg-card);
    padding: 4rem 0 2rem;
    border-top: 1px solid #30363d;
}
footer .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}
.footer-col h3, .footer-col h4 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
.footer-col ul {
    list-style: none;
}
.footer-col ul li {
    margin-bottom: 0.75rem;
}
.footer-col ul li a {
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.footer-col ul li a:hover { color: var(--accent-color); }
.social-links a {
    margin-right: 1.5rem;
    font-weight: 600;
}
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #30363d;
    font-size: 0.9rem;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .services-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; text-align: center; }
    .form-group { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-links { display: none; } /* Da implementare hamburger menu */
    .nav-container { justify-content: center; }
    
    .services, .articles, .about, .contact, .faq { padding: 4rem 0; }
    
    footer .container {
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }
    .footer-col:first-child { grid-column: span 2; }
}

@media (max-width: 480px) {
    footer .container { grid-template-columns: 1fr; }
    .footer-col:first-child { grid-column: span 1; }
}

document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {

    // --- INCOLLA ESATTAMENTE QUESTO BLOCCO ALL'INIZIO ---
    const canvas = document.getElementById('particle-canvas');
    if (canvas) {
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = document.querySelector('.hero').offsetHeight;

        const particles = [];
        const particleCount = 50; // Numero basso per leggerezza
        const connectionDistance = 150;

        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = (Math.random() - 0.5) * 0.2; // Velocità molto lenta
                this.vy = (Math.random() - 0.5) * 0.2;
            }
            update() {
                this.x += this.vx;
                this.y += this.vy;
                if (this.x < 0 || this.x > canvas.width) this.vx = -this.vx;
                if (this.y < 0 || this.y > canvas.height) this.vy = -this.vy;
            }
            draw() {
                ctx.fillStyle = 'rgba(0, 242, 254, 0.5)';
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }

        function animateParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            particles.forEach(p => p.update());
            
            for (let i = 0; i < particles.length; i++) {
                particles[i].draw();
                for (let j = i + 1; j < particles.length; j++) {
                    const dx = particles[i].x - particles[j].x;
                    const dy = particles[i].y - particles[j].y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    if (distance < connectionDistance) {
                        ctx.strokeStyle = `rgba(0, 242, 254, ${0.2 * (1 - distance / connectionDistance)})`;
                        ctx.lineWidth = 0.5;
                        ctx.beginPath();
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(particles[j].x, particles[j].y);
                        ctx.stroke();
                    }
                }
            }
            requestAnimationFrame(animateParticles);
        }
        animateParticles();

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = document.querySelector('.hero').offsetHeight;
        });
    }

    // Il resto del tuo codice JavaScript va qui sotto...
    // ...

});
    // --- LOGICA PER IL CAROUSEL VERTICALE ---
    const sliderWrapper = document.querySelector('.slider-wrapper');
    const slides = document.querySelectorAll('.printer-slide');
    const prevButton = document.querySelector('.prev-button');
    const nextButton = document.querySelector('.next-button');
    let currentSlide = 0;
    const totalSlides = slides.length;

    if (sliderWrapper) {
        const updateSliderPosition = () => {
            // Check for mobile view (horizontal slider)
            if (window.innerWidth <= 992) {
                sliderWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
            } else { // Desktop view (vertical slider)
                sliderWrapper.style.transform = `translateY(-${currentSlide * 100}%)`;
            }
        };

        const updateButtonStates = () => {
            prevButton.disabled = currentSlide === 0;
            nextButton.disabled = currentSlide === totalSlides - 1;
        };

        nextButton.addEventListener('click', () => {
            if (currentSlide < totalSlides - 1) {
                currentSlide++;
                updateSliderPosition();
                updateButtonStates();
            }
        });

        prevButton.addEventListener('click', () => {
            if (currentSlide > 0) {
                currentSlide--;
                updateSliderPosition();
                updateButtonStates();
            }
        });

        // Initial state
        updateSliderPosition();
        updateButtonStates();

        // Optional: Add keyboard navigation
        window.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowDown' && currentSlide < totalSlides - 1) {
                currentSlide++;
                updateSliderPosition();
                updateButtonStates();
            } else if (e.key === 'ArrowUp' && currentSlide > 0) {
                currentSlide--;
                updateSliderPosition();
                updateButtonStates();
            }
        });
    }


    // --- Smooth Reveal on Scroll (logica esistente) ---
    const reveals = document.querySelectorAll('.reveal, .fade-in');

    const handleScroll = () => {
        reveals.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;

            if (elementTop < windowHeight - 100) {
                element.classList.add('is-visible');
            }
        });
    };

    handleScroll();

    let scrollTimeout;
    window.addEventListener('scroll', () => {
        if (scrollTimeout) {
            window.cancelAnimationFrame(scrollTimeout);
        }
        scrollTimeout = window.requestAnimationFrame(() => {
            handleScroll();
        });
    }, { passive: true });

});

// --- Soluzione 2: Rete di Particelle ---
const canvas = document.getElementById('particle-canvas');
if (canvas) {
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = document.querySelector('.hero').offsetHeight;

    const particles = [];
    const particleCount = 50; // Numero basso per leggerezza
    const connectionDistance = 150;

    class Particle {
        constructor() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;
            this.vx = (Math.random() - 0.5) * 0.2; // Velocità molto lenta
            this.vy = (Math.random() - 0.5) * 0.2;
        }
        update() {
            this.x += this.vx;
            this.y += this.vy;
            if (this.x < 0 || this.x > canvas.width) this.vx = -this.vx;
            if (this.y < 0 || this.y > canvas.height) this.vy = -this.vy;
        }
        draw() {
            ctx.fillStyle = 'rgba(0, 242, 254, 0.5)';
            ctx.beginPath();
            ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle());
    }

    function animateParticles() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach(p => p.update());
        
        for (let i = 0; i < particles.length; i++) {
            particles[i].draw();
            for (let j = i + 1; j < particles.length; j++) {
                const dx = particles[i].x - particles[j].x;
                const dy = particles[i].y - particles[j].y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance < connectionDistance) {
                    ctx.strokeStyle = `rgba(0, 242, 254, ${0.2 * (1 - distance / connectionDistance)})`;
                    ctx.lineWidth = 0.5;
                    ctx.beginPath();
                    ctx.moveTo(particles[i].x, particles[i].y);
                    ctx.lineTo(particles[j].x, particles[j].y);
                    ctx.stroke();
                }
            }
        }
        requestAnimationFrame(animateParticles);
    }
    animateParticles();

    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = document.querySelector('.hero').offsetHeight;
    });
}