<?php
$companyName = "Vacaru Costruzioni Generali";
$address = "Via Romagnano 35, Torino, Italia";
$phone = "+39 3206993929";
$email = "info@vacarucostruzionigenerali.it";
$whatsappMessage = "Buongiorno, desidero ricevere informazioni sui vostri servizi.";
$whatsappNumber = "393206993929";

$whatsappLink = "https://wa.me/" . $whatsappNumber . "?text=" . urlencode($whatsappMessage);

$successMessage = "";
$errorMessage = "";

function sanitize($value) {
    return htmlspecialchars(trim($value), ENT_QUOTES, 'UTF-8');
}

function allowedFile($file) {
    $allowedMime = [
        'image/jpeg',
        'image/png',
        'image/webp',
        'application/pdf'
    ];sw
    return in_array($file['type'], $allowedMime);
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $formType = $_POST['form_type'] ?? '';

    if ($formType === 'preventivo') {
        $nome = sanitize($_POST['nome'] ?? '');
        $telefono = sanitize($_POST['telefono'] ?? '');
        $emailMittente = sanitize($_POST['email'] ?? '');
        $tipologia = sanitize($_POST['tipologia'] ?? '');
        $descrizione = sanitize($_POST['descrizione'] ?? '');
        $localita = sanitize($_POST['localita'] ?? '');

        if ($nome && $telefono && $emailMittente && $tipologia && $descrizione && $localita) {
            $uploadInfo = "Nessun file allegato.";

            if (!empty($_FILES['allegato']['name']) && $_FILES['allegato']['error'] === 0) {
                if ($_FILES['allegato']['size'] <= 5 * 1024 * 1024 && allowedFile($_FILES['allegato'])) {
                    $uploadDir = __DIR__ . '/uploads/';
                    if (!is_dir($uploadDir)) {
                        mkdir($uploadDir, 0755, true);
                    }

                    $safeName = time() . '_' . preg_replace('/[^a-zA-Z0-9._-]/', '_', $_FILES['allegato']['name']);
                    $targetPath = $uploadDir . $safeName;

                    if (move_uploaded_file($_FILES['allegato']['tmp_name'], $targetPath)) {
                        $uploadInfo = "File caricato: " . $safeName;
                    } else {
                        $uploadInfo = "File non caricato correttamente.";
                    }
                } else {
                    $uploadInfo = "File non valido. Ammessi JPG, PNG, WEBP, PDF max 5MB.";
                }
            }

            $subject = "Nuova richiesta preventivo - $companyName";
            $message = "
Nuova richiesta preventivo:

Nome e Cognome: $nome
Telefono: $telefono
Email: $emailMittente
Tipologia di lavoro: $tipologia
Località del cantiere: $localita

Descrizione progetto:
$descrizione

Allegato:
$uploadInfo
            ";

            $headers = "From: noreply@" . ($_SERVER['HTTP_HOST'] ?? 'localhost') . "\r\n";
            $headers .= "Reply-To: $emailMittente\r\n";
            $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

            @mail($email, $subject, $message, $headers);

            $successMessage = "Richiesta inviata con successo. Ti contatteremo al più presto.";
        } else {
            $errorMessage = "Compila tutti i campi obbligatori del modulo preventivo.";
        }
    }

    if ($formType === 'candidatura') {
        $nomeLavora = sanitize($_POST['nome_lavora'] ?? '');
        $emailLavora = sanitize($_POST['email_lavora'] ?? '');
        $telefonoLavora = sanitize($_POST['telefono_lavora'] ?? '');
        $ruoloLavora = sanitize($_POST['ruolo_lavora'] ?? '');
        $messaggioLavora = sanitize($_POST['messaggio_lavora'] ?? '');

        if ($nomeLavora && $emailLavora && $telefonoLavora && $ruoloLavora) {
            $cvInfo = "Nessun CV allegato.";

            if (!empty($_FILES['cv']['name']) && $_FILES['cv']['error'] === 0) {
                if ($_FILES['cv']['size'] <= 5 * 1024 * 1024 && allowedFile($_FILES['cv'])) {
                    $uploadDir = __DIR__ . '/uploads/';
                    if (!is_dir($uploadDir)) {
                        mkdir($uploadDir, 0755, true);
                    }

                    $safeName = time() . '_cv_' . preg_replace('/[^a-zA-Z0-9._-]/', '_', $_FILES['cv']['name']);
                    $targetPath = $uploadDir . $safeName;

                    if (move_uploaded_file($_FILES['cv']['tmp_name'], $targetPath)) {
                        $cvInfo = "CV caricato: " . $safeName;
                    } else {
                        $cvInfo = "CV non caricato correttamente.";
                    }
                } else {
                    $cvInfo = "CV non valido. Ammessi JPG, PNG, WEBP, PDF max 5MB.";
                }
            }

            $subject = "Nuova candidatura - $companyName";
            $message = "
Nuova candidatura:

Nome: $nomeLavora
Email: $emailLavora
Telefono: $telefonoLavora
Ruolo: $ruoloLavora

Messaggio:
$messaggioLavora

Allegato:
$cvInfo
            ";

            $headers = "From: noreply@" . ($_SERVER['HTTP_HOST'] ?? 'localhost') . "\r\n";
            $headers .= "Reply-To: $emailLavora\r\n";
            $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

            @mail($email, $subject, $message, $headers);

            $successMessage = "Candidatura inviata con successo.";
        } else {
            $errorMessage = "Compila tutti i campi obbligatori del modulo candidatura.";
        }
    }
}
?>
<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vacaru Costruzioni Generali | Impresa Edile a Torino</title>
  <meta name="description" content="Vacaru Costruzioni Generali realizza costruzioni civili, residenziali e industriali a Torino. Richiedi un preventivo gratuito.">
  <meta name="keywords" content="impresa edile Torino, costruzioni Torino, ristrutturazioni Torino, edilizia civile, ville private, preventivo edilizia">
  <meta name="author" content="Vacaru Costruzioni Generali">
  <meta property="og:title" content="Vacaru Costruzioni Generali">
  <meta property="og:description" content="Costruiamo il futuro con qualità, esperienza e professionalità.">
  <meta property="og:type" content="website">
  <meta name="theme-color" content="#0f172a">
  <link rel="preconnect" href="[fonts.googleapis.com](https://fonts.googleapis.com)">
  <link rel="preconnect" href="[fonts.gstatic.com](https://fonts.gstatic.com)" crossorigin>
  <link rel="stylesheet" href="[cdnjs.cloudflare.com](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css)">
  <link href="[fonts.googleapis.com](https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap)" rel="stylesheet">

  <style>
    :root {
      --bg: #0b1220;
      --bg-soft: #111827;
      --card: rgba(255,255,255,0.06);
      --card-border: rgba(255,255,255,0.12);
      --text: #f8fafc;
      --muted: #cbd5e1;
      --primary: #f59e0b;
      --primary-dark: #d97706;
      --white: #ffffff;
      --success: #16a34a;
      --danger: #dc2626;
      --shadow: 0 10px 35px rgba(0,0,0,0.25);
      --radius: 22px;
      --container: 1200px;
      --header-height: 78px;
    }

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

    html {
      scroll-behavior: smooth;
    }
    /* =========================
   PREMIUM LOADER
========================= */

#loadingScreen{
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, #0b1220 0%, #05060a 70%);
  z-index: 999999;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== particles ===== */
.particles::before,
.particles::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: moveParticles 12s linear infinite;
  opacity: .4;
}

.particles::after{
  background-size: 120px 120px;
  animation-duration: 20s;
  opacity: .2;
}

@keyframes moveParticles{
  from{ transform: translateY(0); }
  to{ transform: translateY(-120px); }
}

/* ===== center ===== */
.loader-center{
  text-align: center;
  color: white;
  z-index: 2;
  transform: perspective(900px);
}

/* ===== LOGO BUILD ===== */
.logo-build{
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  position: relative;
  transform-style: preserve-3d;
}

.piece{
  position:absolute;
  background: linear-gradient(135deg,#f59e0b,#fbbf24);
  box-shadow: 0 0 25px rgba(245,158,11,.4);
  opacity:0;
}

.p1{ width:40px;height:40px; top:0; left:0; animation: build 1.2s forwards 0.2s; }
.p2{ width:40px;height:40px; top:0; right:0; animation: build 1.2s forwards 0.4s; }
.p3{ width:40px;height:40px; bottom:0; left:0; animation: build 1.2s forwards 0.6s; }
.p4{ width:40px;height:40px; bottom:0; right:0; animation: build 1.2s forwards 0.8s; }

.beam{
  position:absolute;
  width:120px;
  height:6px;
  top:50%;
  left:0;
  background: white;
  transform: translateY(-50%) scaleX(0);
  animation: beamGrow 1.5s forwards 1s;
  opacity:.8;
}

@keyframes build{
  0%{ transform: translateY(40px) scale(0); opacity:0; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}

@keyframes beamGrow{
  to{ transform: translateY(-50%) scaleX(1); }
}

/* ===== CRANE 3D ===== */
.crane3d{
  width:140px;
  height:100px;
  margin: 10px auto;
  position: relative;
  transform-style: preserve-3d;
  animation: craneFloat 2.5s ease-in-out infinite;
}

.tower{
  position:absolute;
  bottom:0;
  left:20px;
  width:18px;
  height:90px;
  background: linear-gradient(#94a3b8,#475569);
  transform: rotateY(20deg);
}

.arm{
  position:absolute;
  top:20px;
  width:140px;
  height:6px;
  background: linear-gradient(90deg,#f59e0b,#fbbf24);
  transform: rotateY(-18deg);
  box-shadow: 0 0 20px rgba(245,158,11,.4);
}

.cable{
  position:absolute;
  top:20px;
  right:30px;
  width:2px;
  height:40px;
  background:white;
  animation:swing 1.2s infinite ease-in-out;
}

.hook{
  position:absolute;
  top:60px;
  right:22px;
  width:14px;
  height:14px;
  border:2px solid white;
  border-top:none;
}

@keyframes craneFloat{
  0%,100%{ transform: translateY(0) rotateY(0deg); }
  50%{ transform: translateY(-8px) rotateY(12deg); }
}

@keyframes swing{
  0%{ transform: rotate(0); }
  50%{ transform: rotate(18deg); }
  100%{ transform: rotate(0); }
}

/* ===== TEXT ===== */
.loader-center h1{
  font-size: 1.6rem;
  letter-spacing: 2px;
  margin-top: 10px;
}

.loader-center p{
  color:#cbd5e1;
  margin-top:6px;
}

/* ===== PROGRESS ===== */
.progress{
  width:240px;
  height:6px;
  margin:20px auto 10px;
  background:rgba(255,255,255,0.08);
  border-radius:999px;
  overflow:hidden;
}

#progressBar{
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
  transition:width 1s linear;
}

/* ===== TIMER ===== */
.timer{
  font-size:1.2rem;
  color:#fbbf24;
}

/* subtle shake */
#loadingScreen{
  animation: subtleShake 6s infinite;
}

@keyframes subtleShake{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(0.5px,-0.5px); }
}

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

    img,
    video {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    .container {
      width: min(92%, var(--container));
      margin: 0 auto;
    }

    section {
      padding: 90px 0;
      position: relative;
      scroll-margin-top: 95px;
    }

    .section-title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      margin-bottom: 14px;
      text-align: center;
    }

    .section-subtitle {
      max-width: 760px;
      margin: 0 auto 50px;
      color: var(--muted);
      text-align: center;
      font-size: 1.05rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 14px 22px;
      border-radius: 999px;
      font-weight: 700;
      transition: 0.35s ease;
      border: 1px solid transparent;
      cursor: pointer;
      text-align: center;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary), #fbbf24);
      color: #111827;
      box-shadow: 0 8px 30px rgba(245, 158, 11, 0.35);
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 34px rgba(245, 158, 11, 0.5);
    }

    .btn-outline {
      border: 1px solid rgba(255,255,255,0.22);
      color: var(--white);
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(10px);
    }

    .btn-outline:hover {
      background: rgba(255,255,255,0.10);
      transform: translateY(-3px);
    }

    header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 1000;
      transition: 0.35s ease;
      background: rgba(11,18,32,0.45);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    header.scrolled {
      background: rgba(11,18,32,0.92);
      box-shadow: var(--shadow);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: var(--header-height);
      gap: 20px;
    }

    .logo {
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: 0.5px;
      text-align: center;
    }

    .logo span {
      color: var(--primary);
    }

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

    .nav-links a {
      color: #e5e7eb;
      font-weight: 500;
      transition: 0.3s ease;
    }

    .nav-links a:hover {
      color: var(--primary);
    }

    .menu-toggle {
      display: none;
      font-size: 1.4rem;
      cursor: pointer;
      color: var(--white);
    }

    .hero {
      min-height: 100vh;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 120px 0 70px;
      text-align: center;
    }

    .hero video,
    .hero .hero-fallback {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero .hero-fallback {
      background:
        linear-gradient(rgba(11,18,32,0.55), rgba(11,18,32,0.78)),
        url('[images.unsplash.com](https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80)') center/cover no-repeat;
      z-index: -2;
    }

    .hero video {
      z-index: -3;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.58), rgba(11,18,32,0.88));
      z-index: -1;
    }

    .hero-content {
      text-align: center;
      max-width: 980px;
      animation: fadeUpIntro 1s ease forwards;
      margin-inline: auto;
    }

    .hero-badge {
      display: inline-block;
      margin-bottom: 18px;
      padding: 10px 18px;
      border-radius: 999px;
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.35);
      color: #fde68a;
      font-weight: 600;
      backdrop-filter: blur(10px);
      letter-spacing: 0.5px;
      animation: floatBadge 3s ease-in-out infinite;
      text-align: center;
    }

    .hero h1 {
      font-size: clamp(2.4rem, 6vw, 5rem);
      line-height: 1.05;
      margin-bottom: 18px;
      font-weight: 800;
      text-align: center;
    }

    .hero p {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: #e5e7eb;
      max-width: 760px;
      margin: 0 auto 34px;
      text-align: center;
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }

    .glass-card {
      background: var(--card);
      border: 1px solid var(--card-border);
      backdrop-filter: blur(16px);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .about-grid,
    .contact-grid,
    .work-grid,
    .forms-wrap {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
      align-items: center;
    }

    .about-card,
    .contact-card,
    .work-card,
    .form-card {
      padding: 34px;
    }

    .about-card p,
    .contact-card p,
    .work-card p,
    .form-card p {
      color: var(--muted);
      margin-bottom: 14px;
    }

    .about-image,
    .work-image {
      overflow: hidden;
      min-height: 420px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .about-image img,
    .work-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.6s ease;
    }

    .about-image:hover img,
    .work-image:hover img {
      transform: scale(1.06);
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    .service-card {
      padding: 26px;
      position: relative;
      overflow: hidden;
      transition: 0.4s ease;
      height: 100%;
    }

    .service-card:hover {
      transform: translateY(-8px);
      border-color: rgba(245,158,11,0.35);
      box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    }

    .service-image {
      height: 210px;
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 18px;
    }

    .service-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.5s ease;
    }

    .service-card:hover .service-image img {
      transform: scale(1.08);
    }

    .service-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(245,158,11,0.14);
      color: var(--primary);
      margin-bottom: 18px;
      font-size: 1.35rem;
    }

    .service-card h3 {
      margin-bottom: 12px;
      font-size: 1.18rem;
    }

    .service-card p {
      color: var(--muted);
      margin-bottom: 0;
    }

    .stats {
      background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(255,255,255,0.03));
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 22px;
    }

    .stat-card {
      text-align: center;
      padding: 30px 20px;
    }

    .stat-number {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 8px;
    }

    .stat-label {
      color: var(--muted);
      font-weight: 600;
      text-align: center;
    }

    .projects-slider,
    .testimonials-slider {
      position: relative;
      overflow: hidden;
    }

    .slider-track,
    .testimonial-track {
      display: flex;
      transition: transform 0.7s ease;
      will-change: transform;
    }

    .slide,
    .testimonial-slide {
      min-width: 100%;
      padding: 10px;
    }

    .project-card,
    .testimonial-card {
      overflow: hidden;
      border-radius: var(--radius);
    }

    .project-image {
      height: 480px;
      overflow: hidden;
      position: relative;
    }

    .project-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      animation: slowZoom 10s linear infinite alternate;
    }

    .project-overlay {
      position: absolute;
      inset: auto 0 0 0;
      padding: 28px;
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.82));
    }

    .project-overlay h3 {
      margin-bottom: 10px;
      font-size: 1.4rem;
    }

    .project-overlay p {
      color: #e5e7eb;
      margin-bottom: 0;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      cursor: pointer;
      min-height: 260px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 10px 25px rgba(0,0,0,0.25);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      min-height: 260px;
      object-fit: cover;
      transition: transform 0.6s ease, filter 0.6s ease;
    }

    .gallery-item:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    .gallery-item:hover img {
      transform: scale(1.08);
      filter: contrast(1.05) saturate(1.05);
    }

    .gallery-item::after {
      content: "Apri";
      position: absolute;
      right: 14px;
      bottom: 14px;
      background: rgba(11,18,32,0.75);
      border: 1px solid rgba(255,255,255,0.15);
      color: #fff;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 0.9rem;
      z-index: 2;
    }

    .gallery-item::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 60%);
      opacity: 0;
      transition: 0.4s ease;
      z-index: 1;
    }

    .gallery-item:hover::before {
      opacity: 1;
    }

    .form-card h3 {
      font-size: 1.5rem;
      margin-bottom: 14px;
      text-align: left;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .form-group.full {
      grid-column: 1 / -1;
    }

    label {
      font-weight: 600;
      color: #e5e7eb;
    }

    input,
    textarea,
    select {
      width: 100%;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      color: var(--white);
      outline: none;
      transition: 0.3s ease;
    }

    input::placeholder,
    textarea::placeholder {
      color: #94a3b8;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: rgba(245,158,11,0.55);
      box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
    }

    textarea {
      min-height: 140px;
      resize: vertical;
    }

    select option {
      color: #111827;
    }

    input[type="file"] {
      padding: 12px;
      background: rgba(255,255,255,0.03);
    }

    .alert {
      padding: 14px 18px;
      border-radius: 14px;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .alert-success {
      background: rgba(22,163,74,0.15);
      border: 1px solid rgba(22,163,74,0.4);
      color: #bbf7d0;
    }

    .alert-error {
      background: rgba(220,38,38,0.15);
      border: 1px solid rgba(220,38,38,0.4);
      color: #fecaca;
    }

    .testimonial-card {
      padding: 34px;
    }

    .stars {
      color: #fbbf24;
      margin-bottom: 18px;
      text-align: left;
    }

    .testimonial-top {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 18px;
    }

    .testimonial-top img {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .footer {
      background: #08101d;
      padding: 70px 0 30px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 24px;
      margin-bottom: 30px;
    }

    .footer h4 {
      margin-bottom: 14px;
      font-size: 1.1rem;
    }

    .footer p,
    .footer li,
    .footer a {
      color: var(--muted);
    }

    .footer ul {
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .footer-bottom {
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,0.08);
      color: #94a3b8;
      text-align: center;
      font-size: 0.95rem;
    }

    .whatsapp-float {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #25D366;
      color: white;
      display: grid;
      place-items: center;
      font-size: 1.7rem;
      box-shadow: 0 12px 30px rgba(37,211,102,0.35);
      z-index: 1200;
      animation: pulse 2s infinite;
    }

    .notification-wrap {
      position: fixed;
      left: 20px;
      bottom: 20px;
      z-index: 1300;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 320px;
      pointer-events: none;
    }

    .toast {
      padding: 14px 16px;
      border-radius: 16px;
      background: rgba(15,23,42,0.92);
      border: 1px solid rgba(255,255,255,0.08);
      color: white;
      box-shadow: var(--shadow);
      animation: slideIn 0.4s ease;
    }

    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.92);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1500;
      padding: 20px;
    }

    .lightbox.active {
      display: flex;
    }

    .lightbox img {
      max-width: min(92vw, 1400px);
      max-height: 88vh;
      border-radius: 18px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.45);
    }

    .lightbox-close,
    .lightbox-nav {
      position: absolute;
      border: 0;
      background: rgba(255,255,255,0.12);
      color: white;
      cursor: pointer;
      display: grid;
      place-items: center;
      backdrop-filter: blur(8px);
    }

    .lightbox-close {
      top: 20px;
      right: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      font-size: 1.6rem;
    }

    .lightbox-nav {
      top: 50%;
      transform: translateY(-50%);
      width: 54px;
      height: 54px;
      border-radius: 50%;
      font-size: 1.3rem;
    }

    .lightbox-prev {
      left: 24px;
    }

    .lightbox-next {
      right: 24px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(35px);
      transition: 0.8s ease;
    }

    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes fadeUpIntro {
      from { opacity: 0; transform: translateY(26px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes slowZoom {
      from { transform: scale(1); }
      to { transform: scale(1.08); }
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes floatBadge {
      0% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
      100% { transform: translateY(0); }
    }

    @media (max-width: 1200px) {
      .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 1100px) {
      .services-grid,
      .stats-grid,
      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .forms-wrap,
      .about-grid,
      .contact-grid,
      .work-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 860px) {
      .nav-links {
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: rgba(11,18,32,0.98);
        flex-direction: column;
        padding: 20px;
        display: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }

      .nav-links.active {
        display: flex;
      }

      .menu-toggle {
        display: block;
      }

      .services-grid,
      .stats-grid,
      .gallery-grid,
      .footer-grid,
      .form-grid {
        grid-template-columns: 1fr;
      }

      .hero {
        min-height: auto;
        padding: 120px 0 80px;
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 420px;
        margin: 0 auto;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .project-image {
        height: 340px;
      }

      .about-card,
      .contact-card,
      .work-card,
      .form-card {
        padding: 24px;
      }

      .testimonial-top {
        align-items: flex-start;
      }

      .lightbox-nav {
        width: 46px;
        height: 46px;
      }

      .lightbox-prev {
        left: 10px;
      }

      .lightbox-next {
        right: 10px;
      }

      .lightbox-close {
        top: 10px;
        right: 10px;
      }
    }

    @media (max-width: 640px) {
      section {
        padding: 75px 0;
      }

      .container {
        width: min(94%, var(--container));
      }

      .section-subtitle {
        margin-bottom: 34px;
      }

      .logo {
        font-size: 0.95rem;
        text-align: left;
      }

      .hero-badge {
        font-size: 0.92rem;
      }

      .project-overlay {
        padding: 20px;
      }

      .project-overlay h3 {
        font-size: 1.2rem;
      }

      .gallery-item,
      .gallery-item img {
        min-height: 220px;
      }

      .whatsapp-float {
        width: 56px;
        height: 56px;
        right: 14px;
        bottom: 14px;
      }

      .notification-wrap {
        left: 14px;
        right: 14px;
        bottom: 84px;
        max-width: none;
      }

      .toast {
        font-size: 0.92rem;
      }

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

      .footer,
      .footer-bottom,
      .footer h4,
      .footer p,
      .footer li,
      .footer a {
        text-align: center;
      }
    }

    @media (min-width: 1800px) {
      :root {
        --container: 1440px;
      }

      body {
        font-size: 18px;
      }

      .hero-content {
        max-width: 1100px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
  </style>
</head>

<body>
<!-- PREMIUM CINEMATIC 3D LOADING -->
<div id="loadingScreen">

  <!-- background particles -->
  <div class="particles"></div>

  <div class="loader-center">

    <!-- logo build animation -->
    <div class="logo-build">
      <div class="piece p1"></div>
      <div class="piece p2"></div>
      <div class="piece p3"></div>
      <div class="piece p4"></div>
      <div class="beam"></div>
    </div>

    <!-- 3D crane -->
    <div class="crane3d">
      <div class="tower"></div>
      <div class="arm"></div>
      <div class="cable"></div>
      <div class="hook"></div>
    </div>

    <h1>VACARU COSTRUZIONI</h1>
    <p>Stiamo costruendo la tua esperienza...</p>

    <div class="progress">
      <div id="progressBar"></div>
    </div>

    <div class="timer">
      <span id="timer">5</span>s
    </div>

  </div>
</div>
	<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/6a2eb20c310c741d42c88681/1jr36f13a';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
<header id="header">
  <div class="container nav">
    <a href="#home" class="logo">VACARU <span>COSTRUZIONI</span> GENERALI</a>

    <ul class="nav-links" id="navLinks">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">Chi Siamo</a></li>
      <li><a href="#services">Servizi</a></li>
      <li><a href="#projects">Lavori</a></li>
      <li><a href="#gallery">Galleria</a></li>
      <li><a href="#quote">Preventivo</a></li>
      <li><a href="#careers">Lavora con Noi</a></li>
      <li><a href="#contact">Contatti</a></li>
    </ul>

    <div class="menu-toggle" id="menuToggle">
      <i class="fa-solid fa-bars"></i>
    </div>
  </div>
</header>

<main>
  <section class="hero" id="home">

    <video autoplay muted loop playsinline
      poster="https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80">

      <source src="https://www.vecteezy.com/video/50247797-neon-frame-effect-adorable-crane-on-black-background" type="video/mp4">
    </video>

    <div class="hero-fallback"></div>
    <div class="hero-overlay"></div>

    <div class="container">
      <div class="hero-content">
        <div class="hero-badge">Impresa edile premium a Torino</div>
        <h1>VACARU COSTRUZIONI GENERALI</h1>
        <p>Costruiamo il futuro con qualità, esperienza e professionalità.</p>

        <div class="hero-actions">
          <a href="#quote" class="btn btn-primary"><i class="fa-solid fa-file-signature"></i> Richiedi Preventivo</a>
          <a href="<?= $whatsappLink ?>" target="_blank" class="btn btn-outline"><i class="fa-brands fa-whatsapp"></i> Contattaci su WhatsApp</a>
          <a href="#services" class="btn btn-outline"><i class="fa-solid fa-building"></i> Scopri i Nostri Servizi</a>
        </div>
      </div>
    </div>
  </section>

  <section id="about">
    <div class="container">
      <h2 class="section-title reveal">Chi Siamo</h2>
      <p class="section-subtitle reveal">Esperienza, precisione e innovazione per progetti residenziali, civili e industriali di alto livello.</p>

      <div class="about-grid">
        <div class="about-card glass-card reveal">
          <h3 style="font-size: 1.8rem; margin-bottom: 18px;">La Nostra Storia</h3>
          <p>Vacaru Costruzioni Generali nasce con l'obiettivo di offrire servizi di costruzione di alta qualità, combinando esperienza, precisione e innovazione.</p>
          <p>Grazie alla passione per l'edilizia e all'attenzione per ogni dettaglio, l'azienda realizza progetti residenziali, civili e commerciali garantendo professionalità, sicurezza e rispetto dei tempi di consegna.</p>
          <p>Ogni progetto viene seguito con la massima cura, dalla progettazione alla realizzazione finale, per soddisfare le esigenze dei clienti e creare opere durature nel tempo.</p>
        </div>

        <div class="about-image reveal">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSys-186ehvAUOlENyT4d-N6jx5zH6y5VIYdUQRvK6sw&s=10" alt="Impresa edile al lavoro">
        </div>
      </div>
    </div>
  </section>

  <section id="services">
    <div class="container">
      <h2 class="section-title reveal">I Nostri Servizi</h2>
      <p class="section-subtitle reveal">Soluzioni complete per il settore edilizio, dalla nuova costruzione alle opere specializzate.</p>

      <div class="services-grid">
        <div class="service-card glass-card reveal">

          <img src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1200&q=80" alt="Costruzione Nuovo">

          <div class="service-icon"><i class="fa-solid fa-city"></i></div>
          <h3>Costruzione Nuovo</h3>
          <p>Realizzazione di edifici moderni e innovativi con materiali di alta qualità.</p>
        </div>

        <div class="service-card glass-card reveal">
                <div class="service-image">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8ceHe6tnxxj-SIJNbvHEks7cT3bl6FCBIgjetIkSdGA&s=10" alt="Ville Private">
          </div>
          <div class="service-icon"><i class="fa-solid fa-house"></i></div>
          <h3>Costruzione Residenze e Ville Private</h3>
          <p>Progettazione e costruzione di abitazioni personalizzate e ville di prestigio.</p>
        </div>

        <div class="service-card glass-card reveal">
                <div class="service-image">
                    <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?auto=format&fit=crop&w=1200&q=80" alt="Impianti Sportivi">
                </div>
                <div class="service-icon"><i class="fa-solid fa-futbol"></i></div>
                <h3>Costruzione Impianti Sportivi</h3>
                <p>Realizzazione di strutture sportive funzionali e moderne.</p>
            </div>

        <div class="service-card glass-card reveal">
                <div class="service-image">
                    <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=80" alt="Edilizia Civile">
                </div>
                <div class="service-icon"><i class="fa-solid fa-helmet-safety"></i></div>
                <h3>Edilizia Civile</h3>
                <p>Interventi civili di costruzione, ristrutturazione e manutenzione.</p>
            </div>

        <div class="service-card glass-card reveal">
                <div class="service-image">
                    <img src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=1200&q=80" alt="Ristrutturazioni Complete">
                </div>
                <div class="service-icon"><i class="fa-solid fa-screwdriver-wrench"></i></div>
                <h3>Ristrutturazioni Complete</h3>
                <p>Rinnovamento di immobili residenziali e commerciali.</p>
            </div>

        <div class="service-card glass-card reveal">
                <div class="service-image">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFnuC9MMtA2wI9PWyL425jrltve665bQa7ZTPikSFZEl8dj0Zq-yQdxQ4l&s=10" alt="Opere Murarie">
                </div>
                <div class="service-icon"><i class="fa-solid fa-trowel-bricks"></i></div>
                <h3>Opere Murarie Specializzate</h3>
                <p>Lavorazioni professionali per qualsiasi esigenza edilizia.</p>
            </div>

      </div>
    </div>
  </section>

  <section class="stats" id="stats">
    <div class="container">
      <h2 class="section-title reveal">I Nostri Numeri</h2>
      <p class="section-subtitle reveal">Dati dimostrativi sostituibili con i numeri reali dell'azienda.</p>

      <div class="stats-grid">
        <div class="stat-card glass-card reveal">
          <div class="stat-number" data-target="120">0</div>
          <div class="stat-label">Progetti completati</div>
        </div>
        <div class="stat-card glass-card reveal">
          <div class="stat-number" data-target="95">0</div>
          <div class="stat-label">Clienti soddisfatti</div>
        </div>
        <div class="stat-card glass-card reveal">
          <div class="stat-number" data-target="15">0</div>
          <div class="stat-label">Anni di esperienza</div>
        </div>
        <div class="stat-card glass-card reveal">
          <div class="stat-number" data-target="28">0</div>
          <div class="stat-label">Collaboratori qualificati</div>
        </div>
      </div>
    </div>
  </section>

  <section id="projects">
    <div class="container">
        <h2 class="section-title reveal">I Nostri Progetti</h2>
        <p class="section-subtitle reveal">
            Una selezione dei nostri lavori più recenti: progetti residenziali, industriali e civili realizzati con precisione, qualità e attenzione ai dettagli.
        </p>

        <div class="projects-slider reveal">
            <div class="slider-track" id="sliderTrack">

                <!-- PROGETTO 1 -->
                <div class="slide">
                    <div class="project-card glass-card">
                        <div class="project-image">
                            <img src="https://images.unsplash.com/photo-1489515217757-5fd1be406fef?auto=format&fit=crop&w=1600&q=80" alt="Complesso residenziale moderno">
                            <div class="project-overlay">
                                <h3>Complesso Residenziale Moderno</h3>
                                <p>
                                    Realizzazione di un complesso abitativo contemporaneo, progettato per offrire comfort, sicurezza e design architettonico di alto livello.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- PROGETTO 2 -->
                <div class="slide">
                    <div class="project-card glass-card">
                        <div class="project-image">
                            <img src="https://images.unsplash.com/photo-1448630360428-65456885c650?auto=format&fit=crop&w=1600&q=80" alt="Cantiere industriale moderno">
                            <div class="project-overlay">
                                <h3>Struttura Industriale Avanzata</h3>
                                <p>
                                    Progetto industriale sviluppato con standard elevati di sicurezza, efficienza e organizzazione del cantiere.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- PROGETTO 3 -->
                <div class="slide">
                    <div class="project-card glass-card">
                        <div class="project-image">
                            <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=80" alt="Edilizia civile e ristrutturazione">
                            <div class="project-overlay">
                                <h3>Intervento di Edilizia Civile</h3>
                                <p>
                                    Ristrutturazione completa e riqualificazione strutturale di edifici civili con materiali moderni e tecniche innovative.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- PROGETTO 4 -->
                <div class="slide">
                    <div class="project-card glass-card">
                        <div class="project-image">
                            <img src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80" alt="Costruzione edificio moderno">
                            <div class="project-overlay">
                                <h3>Edificio Residenziale su Misura</h3>
                                <p>
                                    Costruzione di edificio personalizzato con soluzioni architettoniche moderne e finiture di alta qualità.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<section id="gallery">
  <div class="container">
    <h2 class="section-title reveal">Galleria Fotografica</h2>
    <p class="section-subtitle reveal">
      Progetti realizzati dalla nostra azienda
    </p>

    <div class="gallery-grid">

      <div class="gallery-item" onclick="openLightbox(0)">
        <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=80">
      </div>

      <div class="gallery-item" onclick="openLightbox(1)">
        <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=80">
      </div>

      <div class="gallery-item" onclick="openLightbox(2)">
        <img src="https://images.unsplash.com/photo-1581092919535-7146ff1a5905?auto=format&fit=crop&w=1200&q=80">
      </div>

      <div class="gallery-item" onclick="openLightbox(3)">
        <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=80">
      </div>

    </div>
  </div>
</section>

<!-- LIGHTBOX -->
<div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
  <span class="close">&times;</span>

  <img id="lightbox-img" class="lightbox-img">

  <button class="nav prev" onclick="changeImage(-1)">&#10094;</button>
  <button class="nav next" onclick="changeImage(1)">&#10095;</button>
</div>
  <section id="quote">
    <div class="container">
      <h2 class="section-title reveal">Richiesta Preventivo</h2>
      <p class="section-subtitle reveal">Compila il modulo per ricevere una consulenza gratuita e un preventivo personalizzato.</p>

      <?php if ($successMessage): ?>
        <div class="alert alert-success container"><?= $successMessage ?></div>
      <?php endif; ?>

      <?php if ($errorMessage): ?>
        <div class="alert alert-error container"><?= $errorMessage ?></div>
      <?php endif; ?>

      <div class="form-card glass-card reveal">
        <form method="POST" enctype="multipart/form-data">
          <input type="hidden" name="form_type" value="preventivo">

          <div class="form-grid">
            <div class="form-group">
              <label for="nome">Nome e Cognome</label>
              <input type="text" id="nome" name="nome" required>
            </div>

            <div class="form-group">
              <label for="telefono">Telefono</label>
              <input type="text" id="telefono" name="telefono" required>
            </div>

            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" id="email" name="email" required>
            </div>

            <div class="form-group">
              <label for="tipologia">Tipologia di lavoro</label>
              <select id="tipologia" name="tipologia" required>
                <option value="">Seleziona</option>
                <option>Nuova costruzione</option>
                <option>Ristrutturazione completa</option>
                <option>Edilizia civile</option>
                <option>Impianto sportivo</option>
                <option>Villa privata</option>
                <option>Opere murarie</option>
              </select>
            </div>

            <div class="form-group full">
              <label for="descrizione">Descrizione del progetto</label>
              <textarea id="descrizione" name="descrizione" required></textarea>
            </div>

            <div class="form-group">
              <label for="localita">Località del cantiere</label>
              <input type="text" id="localita" name="localita" required>
            </div>

            <div class="form-group">
              <label for="allegato">Caricamento foto/documenti</label>
              <input type="file" id="allegato" name="allegato" accept=".jpg,.jpeg,.png,.webp,.pdf">
            </div>
          </div>

          <div style="margin-top: 22px; display: flex; gap: 14px; flex-wrap: wrap;">
            <button type="submit" class="btn btn-primary"><i class="fa-solid fa-paper-plane"></i> Richiedi Preventivo Gratuito</button>
            <a href="<?= $whatsappLink ?>" target="_blank" class="btn btn-outline"><i class="fa-brands fa-whatsapp"></i> Preventivo via WhatsApp</a>
          </div>
        </form>
      </div>
    </div>
  </section>

  <section id="careers">
    <div class="container">
      <h2 class="section-title reveal">Lavora con Noi</h2>
      <p class="section-subtitle reveal">Siamo sempre alla ricerca di professionisti motivati e qualificati da inserire nel nostro team. Se desideri crescere in un ambiente dinamico e professionale, inviaci la tua candidatura.</p>

      <div class="forms-wrap">
        <div class="work-card glass-card reveal">
          <h3 style="font-size: 1.6rem; margin-bottom: 16px;">Posizioni Aperte</h3>
          <p><strong>Muratore specializzato</strong> - Esperienza in opere civili e residenziali.</p>
          <p><strong>Manovale edile</strong> - Supporto operativo in cantiere.</p>
          <p><strong>Capocantiere</strong> - Coordinamento lavori e gestione team.</p>
          <p><strong>Operatore macchine</strong> - Utilizzo mezzi e attrezzature di cantiere.</p>
          <p>Requisiti richiesti: affidabilità, puntualità, capacità di lavorare in squadra, esperienza nel settore e attenzione alla sicurezza.</p>
        </div>

        <div class="form-card glass-card reveal">
          <h3>Invia la tua candidatura</h3>
          <p>Compila il modulo e allega il tuo CV.</p>

          <form method="POST" enctype="multipart/form-data">
            <input type="hidden" name="form_type" value="candidatura">

            <div class="form-grid">
              <div class="form-group">
                <label for="nome_lavora">Nome e Cognome</label>
                <input type="text" id="nome_lavora" name="nome_lavora" required>
              </div>

              <div class="form-group">
                <label for="email_lavora">Email</label>
                <input type="email" id="email_lavora" name="email_lavora" required>
              </div>

              <div class="form-group">
                <label for="telefono_lavora">Telefono</label>
                <input type="text" id="telefono_lavora" name="telefono_lavora" required>
              </div>

              <div class="form-group">
                <label for="ruolo_lavora">Posizione di interesse</label>
                <select id="ruolo_lavora" name="ruolo_lavora" required>
                  <option value="">Seleziona</option>
                  <option>Muratore specializzato</option>
                  <option>Manovale edile</option>
                  <option>Capocantiere</option>
                  <option>Operatore macchine</option>
                  <option>Altro</option>
                </select>
              </div>

              <div class="form-group full">
                <label for="messaggio_lavora">Messaggio</label>
                <textarea id="messaggio_lavora" name="messaggio_lavora"></textarea>
              </div>

              <div class="form-group full">
                <label for="cv">Carica CV</label>
                <input type="file" id="cv" name="cv" accept=".jpg,.jpeg,.png,.webp,.pdf">
              </div>
            </div>

            <div style="margin-top: 22px;">
              <button type="submit" class="btn btn-primary"><i class="fa-solid fa-user-plus"></i> Invia Candidatura</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <section id="testimonials">
    <div class="container">
      <h2 class="section-title reveal">Testimonianze Clienti</h2>
      <p class="section-subtitle reveal">Recensioni dimostrative in attesa dei feedback reali dei clienti.</p>

      <div class="testimonials-slider reveal">
        <div class="testimonial-track" id="testimonialTrack">
          <div class="testimonial-slide">
            <div class="testimonial-card glass-card">
              <div class="stars">★★★★★</div>
              <p>"Azienda seria, precisa e puntuale. Lavoro eseguito con grande professionalità."</p>
              <div class="testimonial-top">
                <img src="[randomuser.me](https://randomuser.me/api/portraits/men/32.jpg)" alt="Cliente 1">
                <div>
                  <strong>Marco R.</strong><br>
                  <span style="color: var(--muted);">Cliente privato</span>
                </div>
              </div>
            </div>
          </div>

          <div class="testimonial-slide">
            <div class="testimonial-card glass-card">
              <div class="stars">★★★★★</div>
              <p>"Ottima esperienza, comunicazione chiara e qualità finale superiore alle aspettative."</p>
              <div class="testimonial-top">
                <img src="[randomuser.me](https://randomuser.me/api/portraits/women/44.jpg)" alt="Cliente 2">
                <div>
                  <strong>Elena T.</strong><br>
                  <span style="color: var(--muted);">Committenza residenziale</span>
                </div>
              </div>
            </div>
          </div>

          <div class="testimonial-slide">
            <div class="testimonial-card glass-card">
              <div class="stars">★★★★★</div>
              <p>"Team affidabile, organizzato e attento ai dettagli. Consigliati per lavori importanti."</p>
              <div class="testimonial-top">
                <img src="[randomuser.me](https://randomuser.me/api/portraits/men/75.jpg)" alt="Cliente 3">
                <div>
                  <strong>Luca P.</strong><br>
                  <span style="color: var(--muted);">Cliente commerciale</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="contact">
    <div class="container">
      <h2 class="section-title reveal">Contatti</h2>
      <p class="section-subtitle reveal">Siamo a disposizione per informazioni, consulenze e richieste di preventivo.</p>

      <div class="contact-grid">
        <div class="contact-card glass-card reveal">
          <h3 style="font-size: 1.6rem; margin-bottom: 18px;"><?= $companyName ?></h3>
          <p><i class="fa-solid fa-location-dot" style="color: var(--primary); margin-right: 10px;"></i><?= $address ?></p>
          <p><i class="fa-solid fa-phone" style="color: var(--primary); margin-right: 10px;"></i><?= $phone ?></p>
          <p><i class="fa-solid fa-envelope" style="color: var(--primary); margin-right: 10px;"></i><?= $email ?></p>
          <p><i class="fa-brands fa-whatsapp" style="color: var(--primary); margin-right: 10px;"></i><a href="<?= $whatsappLink ?>" target="_blank">Chatta su WhatsApp</a></p>
        </div>
        <div class="work-image reveal">
          <img src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1200&q=80" alt="Contatti impresa edile">
        </div>
      </div>
    </div>
  </section>
</main>

<footer class="footer">
  <div class="container">
    <div class="footer-grid">
      <div>
        <h4>Vacaru Costruzioni Generali</h4>
        <p>Impresa specializzata in costruzioni, edilizia civile, residenziale e industriale con approccio professionale, moderno e orientato alla qualità.</p>
      </div>

      <div>
        <h4>Contatti</h4>
        <ul>
          <li>📍 <?= $address ?></li>
          <li>📞 <?= $phone ?></li>
          <li>📧 <?= $email ?></li>
          <li>💬 <a href="<?= $whatsappLink ?>" target="_blank">WhatsApp</a></li>
        </ul>
      </div>

      <div>
        <h4>Link Rapidi</h4>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">Chi Siamo</a></li>
          <li><a href="#services">Servizi</a></li>
          <li><a href="#quote">Preventivo</a></li>
          <li><a href="#careers">Lavora con Noi</a></li>
          <li><a href="#contact">Contatti</a></li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      © <?= date('Y') ?> <?= $companyName ?> - Tutti i diritti riservati.
    </div>
  </div>
</footer>

<a href="<?= $whatsappLink ?>" target="_blank" class="whatsapp-float" aria-label="WhatsApp">
  <i class="fa-brands fa-whatsapp"></i>
</a>

<div class="notification-wrap" id="notificationWrap"></div>

<div class="lightbox" id="lightbox">
  <span class="lightbox-close" id="lightboxClose">&times;</span>
  <img src="" alt="Preview immagine" id="lightboxImg">
</div>
<script>
  if(sessionStorage.getItem("loaded")){
  screen.style.display = "none";
} else {

  const interval = setInterval(() => {

    timeLeft--;

    timer.textContent = timeLeft;
    bar.style.width = ((5 - timeLeft) / 5) * 100 + "%";

    if(timeLeft <= 0){
      clearInterval(interval);

      screen.style.transition = "0.8s ease";
      screen.style.opacity = "0";
      screen.style.transform = "scale(1.05)";

      setTimeout(() => {
        screen.style.display = "none";
        sessionStorage.setItem("loaded", "true");
      }, 800);
    }

  }, 1000);

}
</script>
<script>
const images = [
  "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=80",
  "https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=80",
  "https://images.unsplash.com/photo-1581092919535-7146ff1a5905?auto=format&fit=crop&w=1200&q=80",
  "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=80"
];
<script>
let timeLeft = 5;

const timer = document.getElementById("timer");
const bar = document.getElementById("progressBar");
const screen = document.getElementById("loadingScreen");

// show loader only once per session (premium touch)

let currentIndex = 0;

function openLightbox(index){
  currentIndex = index;
  document.getElementById("lightbox").style.display = "flex";
  document.getElementById("lightbox-img").src = images[currentIndex];
}

function closeLightbox(e){
  if(e.target.id === "lightbox"){
    document.getElementById("lightbox").style.display = "none";
  }
}

function changeImage(step){
  currentIndex += step;

  if(currentIndex < 0) currentIndex = images.length - 1;
  if(currentIndex >= images.length) currentIndex = 0;

  document.getElementById("lightbox-img").src = images[currentIndex];
}

// tastatură
document.addEventListener("keydown", function(e){
  if(document.getElementById("lightbox").style.display === "flex"){
    if(e.key === "ArrowRight") changeImage(1);
    if(e.key === "ArrowLeft") changeImage(-1);
    if(e.key === "Escape") document.getElementById("lightbox").style.display = "none";
  }
});
</script>

<script>
  const header = document.getElementById('header');
  window.addEventListener('scroll', () => {
    header.classList.toggle('scrolled', window.scrollY > 20);
  });

  const menuToggle = document.getElementById('menuToggle');
  const navLinks = document.getElementById('navLinks');
  menuToggle.addEventListener('click', () => navLinks.classList.toggle('active'));

  const revealElements = document.querySelectorAll('.reveal');
  const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) entry.target.classList.add('active');
    });
  }, { threshold: 0.15 });

  revealElements.forEach(el => revealObserver.observe(el));

  const statNumbers = document.querySelectorAll('.stat-number');
  const statsSection = document.getElementById('stats');
  let statsStarted = false;

  const animateStats = () => {
    statNumbers.forEach(stat => {
      const target = +stat.getAttribute('data-target');
      let current = 0;
      const increment = Math.ceil(target / 80);

      const updateCounter = () => {
        current += increment;
        if (current >= target) {
          stat.textContent = target + '+';
        } else {
          stat.textContent = current + '+';
          requestAnimationFrame(updateCounter);
        }
      };
      updateCounter();
    });
  };

  const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !statsStarted) {
        statsStarted = true;
        animateStats();
      }
    });
  }, { threshold: 0.3 });

  if (statsSection) statsObserver.observe(statsSection);

  const sliderTrack = document.getElementById('sliderTrack');
  const slides = document.querySelectorAll('.slide');
  let currentSlide = 0;

  setInterval(() => {
    currentSlide = (currentSlide + 1) % slides.length;
    sliderTrack.style.transform = `translateX(-${currentSlide * 100}%)`;
  }, 4500);

  const testimonialTrack = document.getElementById('testimonialTrack');
  const testimonialSlides = document.querySelectorAll('.testimonial-slide');
  let currentTestimonial = 0;

  setInterval(() => {
    currentTestimonial = (currentTestimonial + 1) % testimonialSlides.length;
    testimonialTrack.style.transform = `translateX(-${currentTestimonial * 100}%)`;
  }, 5000);

const notifications = [
  "Un cliente ha richiesto un preventivo.",
  "Nuovo progetto completato.",
  "Contattaci direttamente su WhatsApp.",
  "Richiedi ora una consulenza gratuita.",
  "Iscriviti alla nostra pagina Instagram.",
  "Nuovo aggiornamento disponibile.",
  "Hai un nuovo messaggio.",
  "Offerta speciale attiva solo oggi.",
  "Il tuo progetto è stato approvato.",
  "Nuovo lead generato dal sito."
];
  const notificationWrap = document.getElementById('notificationWrap');

  function showNotification() {
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.textContent = notifications[Math.floor(Math.random() * notifications.length)];
    notificationWrap.appendChild(toast);

    setTimeout(() => {
      toast.style.opacity = '0';
      toast.style.transform = 'translateY(10px)';
      setTimeout(() => toast.remove(), 400);
    }, 4200);
  }

  setTimeout(showNotification, 2200);
  setInterval(showNotification, 9000);

  const filterButtons = document.querySelectorAll('.filter-btn');
  const galleryItems = document.querySelectorAll('.gallery-item');

  filterButtons.forEach(button => {
    button.addEventListener('click', () => {
      filterButtons.forEach(btn => btn.classList.remove('active'));
      button.classList.add('active');

      const filter = button.getAttribute('data-filter');

      galleryItems.forEach(item => {
        const category = item.getAttribute('data-category');
        if (filter === 'all' || filter === category) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      });
    });
  });

  const lightbox = document.getElementById('lightbox');
  const lightboxImg = document.getElementById('lightboxImg');
  const lightboxClose = document.getElementById('lightboxClose');

  galleryItems.forEach(item => {
    item.addEventListener('click', () => {
      const img = item.querySelector('img');
      lightboxImg.src = img.src;
      lightbox.classList.add('active');
    });
  });

  lightboxClose.addEventListener('click', () => lightbox.classList.remove('active'));
  lightbox.addEventListener('click', e => {
    if (e.target === lightbox) lightbox.classList.remove('active');
  });
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {

  let timeLeft = 5;

  const timer = document.getElementById("timer");
  const bar = document.getElementById("progressBar");
  const screen = document.getElementById("loadingScreen");

  if (sessionStorage.getItem("loaded")) {
    screen.style.display = "none";
    return;
  }

  const interval = setInterval(() => {
    timeLeft--;

    timer.textContent = timeLeft;
    bar.style.width = ((5 - timeLeft) / 5) * 100 + "%";

    if (timeLeft <= 0) {
      clearInterval(interval);

      screen.style.opacity = "0";
      screen.style.transform = "scale(1.05)";

      setTimeout(() => {
        screen.style.display = "none";
        sessionStorage.setItem("loaded", "true");
      }, 800);
    }
  }, 1000);

});
</script>
	<div id='tawk_6a2eb20c310c741d42c88681'></div>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); Tawk_API.embedded='tawk_6a2eb20c310c741d42c88681';
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/6a2eb20c310c741d42c88681/1jr3718i5';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);})();
</script>
<!--End of Tawk.to Script-->
</body>
</html>