
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geom. Carlo Musso – Studio Tecnico Genova</title>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* ══════════════════════════════════════════
   DESIGN TOKENS — palette invariata
══════════════════════════════════════════ */
:root {
  /* colori base */
  --primary:      #1a2330;
  --azure:        #9adaff;
  --azure-dark:   #5ab8f0;
  --azure-pale:   rgba(154,218,255,0.07);
  --azure-glow:   rgba(154,218,255,0.14);
  --grey:         #b4b4b4;
  --grey-dark:    #6a6a6a;
  --grey-light:   #d4d4d4;
  --white:        #ffffff;
  --ink-mid:      #212f40;
  --ink-soft:     #2a3c52;
  --ink-deep:     #161e29;

  /* bordi */
  --border:       rgba(154,218,255,0.13);
  --border-s:     rgba(154,218,255,0.28);
  --border-sub:   rgba(154,218,255,0.07);

  /* tipografia */
  --fs-xs:   0.67rem;
  --fs-sm:   0.8rem;
  --fs-base: 0.92rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.4rem;
  --fs-xl:   2.2rem;
  --fs-2xl:  3.2rem;
  --fs-hero: clamp(3rem, 6vw, 4.8rem);

  /* spacing */
  --pad-x:   5%;
  --sec-v:   5.5rem;

  /* radii */
  --r-sm: 3px;
  --r-md: 6px;

  /* ombre */
  --shadow-card: 0 8px 28px rgba(0,0,0,0.32);
  --shadow-deep: 0 18px 48px rgba(0,0,0,0.46);

  /* transizioni */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.18s;
  --t-mid:  0.28s;
  --t-slow: 0.55s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Libre Baskerville', 'Cambria', Georgia, serif;
  background: var(--primary);
  color: var(--grey);
  overflow-x: hidden;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; transition: color var(--t-fast); }
strong { color: var(--grey-light); font-weight: 700; }

/* ══════════════════════════════════════════
   ACCESSIBILITÀ — rispetta prefers-reduced-motion
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in-up { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════
   ANIMAZIONI SCROLL
══════════════════════════════════════════ */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* stagger su figli diretti */
.stagger > *:nth-child(1) { transition-delay: 0.04s; }
.stagger > *:nth-child(2) { transition-delay: 0.11s; }
.stagger > *:nth-child(3) { transition-delay: 0.18s; }
.stagger > *:nth-child(4) { transition-delay: 0.25s; }
.stagger > *:nth-child(5) { transition-delay: 0.32s; }

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
nav {
  position: sticky; top: 0; z-index: 1000; height: 68px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--pad-x);
  background: rgba(22,30,41,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  /* sottile linea progress in cima */
  box-shadow: 0 1px 0 0 var(--border);
}

/* progress di scroll */
nav::after {
  content: '';
  position: absolute; bottom: -1px; left: 0;
  width: var(--scroll-pct, 0%); height: 1px;
  background: var(--azure); opacity: 0.5;
  transition: width 0.1s linear;
  pointer-events: none;
}

.nav-brand { display: flex; flex-direction: column; text-decoration: none; gap: 2px; }
.nav-brand-name { font-weight: 700; font-size: var(--fs-md); color: var(--white); letter-spacing: 0.02em; }
.nav-brand-name span { color: var(--azure); }
.nav-brand-sub { font-size: 0.6rem; color: var(--grey-dark); text-transform: uppercase; letter-spacing: 0.2em; font-style: italic; }

.nav-links { display: flex; list-style: none; gap: 1.8rem; align-items: center; }
.nav-links > li > a {
  font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey); position: relative; padding-bottom: 3px;
  transition: color var(--t-fast);
}
.nav-links > li > a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--azure); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav-links > li > a:hover { color: var(--azure); }
.nav-links > li > a:hover::after { transform: scaleX(1); }

.nav-cta {
  border: 1px solid var(--azure) !important; color: var(--azure) !important;
  padding: 0.42rem 1.15rem !important; border-radius: var(--r-sm);
  font-size: var(--fs-xs) !important; letter-spacing: 0.12em !important;
  transition: background var(--t-fast), color var(--t-fast) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--azure) !important; color: var(--primary) !important; }

/* Mega menu */
.has-mega { position: relative; }
.mega-menu {
  display: none; position: fixed; top: 68px; left: 0; right: 0;
  background: rgba(18,25,37,0.99);
  border-top: 1px solid var(--azure); border-bottom: 1px solid var(--border);
  padding: 2rem var(--pad-x); z-index: 999;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  grid-template-columns: repeat(6,1fr); gap: 1.5rem;
}
.mega-menu.open { display: grid; }
#megaBridge { display:none; position:fixed; top:68px; left:0; right:0; height:10px; z-index:998; }
#megaBridge.open { display:block; }
.mega-col-title {
  font-size: 0.57rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--azure); margin-bottom: 0.75rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.mega-col a {
  display: block; padding: 0.26rem 0; font-size: 0.77rem; color: var(--grey);
  white-space: nowrap;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.mega-col a:hover { color: var(--azure); padding-left: 5px; }

/* Hamburger */
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--azure); transition: all 0.3s; border-radius: 1px; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile menu */
.mobile-menu {
  display: none; position: fixed; top: 68px; left: 0; right: 0;
  background: rgba(18,25,37,0.99); border-bottom: 1px solid var(--azure);
  padding: 1.5rem var(--pad-x); z-index: 998;
  max-height: calc(100vh - 68px); overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu-section { margin-bottom: 1.4rem; }
.mobile-menu-title { font-size: 0.57rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--azure); margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.mobile-menu a { display: block; padding: 0.5rem 0; font-size: var(--fs-sm); color: var(--grey-light); border-bottom: 1px solid var(--border-sub); transition: color var(--t-fast), padding-left var(--t-fast); }
.mobile-menu a:hover { color: var(--azure); padding-left: 6px; }
.mobile-menu-cta { display: block; margin-top: 1.5rem; text-align: center; padding: 0.8rem; border: 1px solid var(--azure); color: var(--azure) !important; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; border-radius: var(--r-sm); transition: background var(--t-fast); }
.mobile-menu-cta:hover { background: var(--azure); color: var(--primary) !important; }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
#hero {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: calc(100vh - 68px);
  align-items: stretch;
  position: relative; overflow: hidden;
}

/* griglia di punti ambiente */
#hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(154,218,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
}

/* alone luce in alto a destra */
#hero::after {
  content: '';
  position: absolute; top: -100px; right: 300px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(154,218,255,0.05) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

.hero-content {
  padding: 6rem var(--pad-x) 5rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}

.hero-tag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--azure); font-size: var(--fs-xs); letter-spacing: 0.26em; text-transform: uppercase;
  margin-bottom: 1.4rem; opacity: 0.85;
}
.hero-tag::before {
  content: ''; display: inline-block;
  width: 26px; height: 1px; background: var(--azure);
}

h1.hero-title {
  font-size: var(--fs-hero);
  line-height: 1.02; margin-bottom: 1.4rem;
  color: var(--white); letter-spacing: -0.01em;
}
h1.hero-title em { color: var(--azure); font-style: normal; }

.hero-desc {
  font-size: var(--fs-base); color: var(--grey);
  max-width: 480px; line-height: 1.84;
}

.hero-cta {
  display: inline-block; margin-top: 2.2rem;
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--azure); color: var(--azure);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: var(--r-sm);
  transition: background var(--t-mid), color var(--t-mid), transform var(--t-mid) var(--ease-spring);
  align-self: flex-start;
}
.hero-cta:hover {
  background: var(--azure); color: var(--ink-deep);
  transform: translateY(-2px);
}

.hero-stats {
  display: flex; gap: 2.5rem; margin-top: 3rem;
  padding-top: 1.6rem; border-top: 1px solid var(--border);
}
.hero-stat-label {
  font-size: 0.6rem; color: var(--grey-dark);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.hero-stat-value {
  font-weight: 700; font-size: var(--fs-base);
  color: var(--white); margin-top: 0.28rem;
}

/* pannello destra — griglia card a tutta altezza */
.hero-cards {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 1fr 1fr;
  border-left: 1px solid var(--border);
  background: var(--border);
  gap: 1px;
}

.hero-card {
  background: var(--ink-mid);
  padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.55rem; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background var(--t-mid);
}

.hero-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--azure-glow) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--t-mid);
}
.hero-card:hover { background: var(--ink-soft); }
.hero-card:hover::before { opacity: 1; }

/* linea accent su hover */
.hero-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--azure);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-mid) var(--ease-out);
}
.hero-card:hover::after { transform: scaleY(1); }

.hero-card-icon { position: relative; z-index: 1; }
.hero-card-icon svg { width: 22px; height: 22px; color: var(--azure); }
.hero-card-title { font-weight: 700; font-size: var(--fs-sm); color: var(--white); line-height: 1.3; position: relative; z-index: 1; }
.hero-card-sub { font-size: 0.72rem; color: var(--grey-dark); line-height: 1.45; position: relative; z-index: 1; }

/* ══════════════════════════════════════════
   SEZIONI GENERALI
══════════════════════════════════════════ */
section { padding: var(--sec-v) var(--pad-x); scroll-margin-top: 68px; }
.sec-header { margin-bottom: 3.2rem; }

.sec-label {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--azure); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-xs); letter-spacing: 0.24em;
}
.sec-label::before {
  content: ''; display: inline-block;
  width: 20px; height: 1px; background: var(--azure); opacity: 0.7;
}

.sec-title { font-size: var(--fs-xl); margin-top: 0.45rem; color: var(--white); line-height: 1.1; }
.sec-title em { color: var(--azure); font-style: normal; }

.azure-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(154,218,255,0.3) 0%, transparent 80%);
  margin: 0 var(--pad-x);
}

.sec-alt { background: var(--ink-mid); }

/* ══════════════════════════════════════════
   SEZIONE PANORAMICA — 4 CATEGORIE
══════════════════════════════════════════ */
#panoramica { background: var(--ink-mid); }

.pan-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--border); gap: 1px;
}

.pan-card {
  background: var(--ink-mid);
  padding: 2.4rem 1.8rem 2rem;
  display: flex; flex-direction: column;
  position: relative; cursor: default; overflow: hidden;
  transition: background var(--t-mid);
}

/* accent riga top */
.pan-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--azure), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
  z-index: 1;
}
/* spotlight che segue il cursore */
.pan-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--azure-glow) 0%, transparent 55%);
  opacity: 0; transition: opacity var(--t-mid); pointer-events: none;
}
.pan-card:hover { background: var(--ink-soft); }
.pan-card:hover::before { transform: scaleX(1); }
.pan-card:hover::after { opacity: 1; }
.pan-card > * { position: relative; z-index: 1; }

.pan-num {
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--azure); opacity: 0.45; margin-bottom: 1rem; font-style: italic;
}

.pan-icon { color: var(--azure); margin-bottom: 0.9rem; }
.pan-icon svg { width: 22px; height: 22px; opacity: 0.7; }

.pan-title {
  font-size: var(--fs-base); font-weight: 700; color: var(--white);
  margin-bottom: 0.8rem; line-height: 1.3;
}
.pan-desc { font-size: 0.8rem; color: var(--grey); line-height: 1.76; flex: 1; }

.pan-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.4rem; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azure); transition: gap var(--t-fast);
}
.pan-card:hover .pan-link { gap: 0.65rem; }
.pan-link svg { width: 12px; height: 12px; transition: transform var(--t-fast); }
.pan-card:hover .pan-link svg { transform: translateX(2px); }

/* ══════════════════════════════════════════
   SERVIZI & ACCORDION
══════════════════════════════════════════ */
.service-categories { display: flex; flex-direction: column; gap: 6px; }

.service-cat {
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--ink-mid);
  transition: border-color var(--t-mid);
}
.service-cat.open { border-color: var(--border-s); }
.service-cat:not(.open):hover { border-color: rgba(154,218,255,0.22); }

.service-cat-header {
  padding: 1.3rem 1.5rem; display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; user-select: none;
  transition: background var(--t-fast);
}
.service-cat-header:hover { background: var(--azure-pale); }

.cat-hdr-left { display: flex; align-items: center; gap: 1rem; }
.cat-hdr-num { color: var(--azure); font-weight: 700; font-size: var(--fs-sm); opacity: 0.35; font-style: italic; min-width: 24px; }
.cat-hdr-title { font-size: var(--fs-md); font-weight: 700; color: var(--white); }
.cat-hdr-count { font-size: 0.65rem; color: var(--grey-dark); background: rgba(255,255,255,0.06); padding: 2px 8px; border-radius: 20px; letter-spacing: 0.04em; }

/* toggle rotante — cerchio con +/× */
.cat-toggle {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  flex-shrink: 0;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.service-cat:not(.open):hover .cat-toggle { border-color: var(--azure); }
.cat-toggle svg { width: 13px; height: 13px; color: var(--azure); transition: transform 0.4s var(--ease-spring); }
.service-cat.open .cat-toggle { background: var(--azure-glow); border-color: var(--azure); }
.service-cat.open .cat-toggle svg { transform: rotate(45deg); }

.service-cat-body { max-height: 0; overflow: hidden; transition: max-height 0.55s ease-in-out; }
.service-cat.open .service-cat-body { max-height: 3500px; padding-bottom: 1rem; }

.service-items { padding: 0 1.5rem; }
.service-item { border-top: 1px solid var(--border-sub); }

.service-item-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem 0; cursor: pointer; user-select: none;
  font-weight: 500; font-size: var(--fs-base);
  color: var(--grey-light);
  transition: color var(--t-fast);
}
.service-item-header:hover { color: var(--azure); }
.item-title { flex: 1; }
.item-toggle {
  font-size: 1.1rem; color: var(--azure);
  transition: transform 0.3s var(--ease-spring); min-width: 20px; text-align: center; line-height: 1;
}
.service-item.open .item-toggle { transform: rotate(45deg); }

.service-item-body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-slow) ease;
  font-size: var(--fs-sm); color: var(--grey); line-height: 1.8;
}
.service-item.open .service-item-body { max-height: 1000px; }
.service-item-body p { padding: 0.3rem 0 1rem; }
.service-item-body ul { padding: 0.3rem 0 1rem 1.2rem; }
.service-item-body li { margin-bottom: 5px; }
.service-item-body strong { color: var(--grey-light); }

/* badge agevolazioni inline */
.agevol-badge { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.7rem 0 0.5rem; }
.agevol-tag {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(154,218,255,0.09); color: var(--azure);
  border: 1px solid rgba(154,218,255,0.25); border-radius: var(--r-sm);
  padding: 3px 8px;
}

/* ══════════════════════════════════════════
   LEAD FORM
══════════════════════════════════════════ */
.lead-section { background: var(--ink-deep); }
.lead-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
  align-items: center; max-width: 1200px; margin: 0 auto;
}

.lead-text-col h2 { font-size: var(--fs-xl); line-height: 1.15; color: var(--white); margin-bottom: 1rem; margin-top: 0.5rem; }
.lead-text-col p { font-size: var(--fs-base); color: var(--grey); line-height: 1.82; }
.lead-check {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-sm); color: var(--grey); margin-top: 0.75rem;
}
.lead-check svg { color: var(--azure); flex-shrink: 0; }

.lead-form-col {
  background: var(--ink-mid); border: 1px solid var(--border);
  padding: 2.6rem 2.2rem; border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

.dark-form .form-group { margin-bottom: 1.1rem; }
.dark-form label { display: block; color: rgba(255,255,255,0.42); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }

.dark-form input[type="text"],
.dark-form input[type="tel"],
.dark-form input[type="email"],
.dark-form textarea,
.lead-form-col .wpcf7-text,
.lead-form-col .wpcf7-tel,
.lead-form-col .wpcf7-email,
.lead-form-col .wpcf7-textarea {
  width: 100%; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(154,218,255,0.30);
  padding: 0.8rem 0.9rem;
  color: #ffffff !important;
  caret-color: #9adaff !important;
  font-size: var(--fs-base);
  border-radius: var(--r-sm); font-family: inherit;
  transition: background var(--t-fast), border-color var(--t-fast);
  -webkit-text-fill-color: #ffffff !important;
}
.dark-form input:focus, .dark-form textarea:focus,
.lead-form-col .wpcf7-text:focus, .lead-form-col .wpcf7-tel:focus,
.lead-form-col .wpcf7-email:focus, .lead-form-col .wpcf7-textarea:focus {
  outline: none; background: rgba(255,255,255,0.09); border-color: var(--azure);
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  caret-color: #9adaff !important;
}
/* autocomplete browser — sfondo scuro */
.dark-form input:-webkit-autofill,
.dark-form input:-webkit-autofill:hover,
.dark-form input:-webkit-autofill:focus,
.lead-form-col .wpcf7-text:-webkit-autofill,
.lead-form-col .wpcf7-tel:-webkit-autofill,
.lead-form-col .wpcf7-email:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px rgba(33,47,64,0.98) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #9adaff !important;
}
.dark-form textarea, .lead-form-col .wpcf7-textarea { resize: vertical; min-height: 100px; }
.dark-form ::placeholder, .lead-form-col ::placeholder { color: rgba(255,255,255,0.35); font-family: inherit; }

.dark-form .privacy-group, .lead-form-col .wpcf7-acceptance {
  display: flex; align-items: flex-start; gap: 10px; margin: 1.1rem 0;
}
.dark-form .privacy-group input[type="checkbox"],
.lead-form-col .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 3px; accent-color: var(--azure); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0;
}
.dark-form .privacy-group label, .lead-form-col .wpcf7-list-item-label {
  color: rgba(255,255,255,0.42); font-size: 0.74rem; line-height: 1.5; text-transform: none; letter-spacing: 0;
}
.dark-form .privacy-group a, .lead-form-col .wpcf7-list-item-label a { color: var(--azure); }

/* CTA primaria: filled azure → più leggibile e d'impatto */
.dark-form .btn-submit, .lead-form-col .wpcf7-submit {
  background: var(--azure); color: var(--ink-deep); border: none;
  padding: 0.95rem; font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; border-radius: var(--r-sm);
  cursor: pointer; width: 100%; font-family: inherit;
  transition: background var(--t-fast), transform var(--t-mid) var(--ease-spring);
}
.dark-form .btn-submit:hover, .lead-form-col .wpcf7-submit:hover { background: var(--azure-dark); transform: translateY(-2px); }
.lead-form-col .wpcf7-form p { margin-bottom: 1rem; }
.lead-form-col .wpcf7-form .wpcf7-response-output { color: rgba(255,255,255,0.75); font-size: var(--fs-sm); margin-top: 10px; padding: 10px; border-radius: var(--r-sm); }
.lead-form-col .wpcf7-form.sent .wpcf7-response-output { background: rgba(154,218,255,0.08); border-color: var(--azure); }
.lead-form-col .wpcf7-form.failed .wpcf7-response-output { background: rgba(255,80,80,0.08); }

/* ══════════════════════════════════════════
   CLIENTI
══════════════════════════════════════════ */
.clients-grid {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  align-items: center; justify-content: center; margin-top: 2.5rem;
}
.client-logo {
  padding: 0.8rem 1.4rem; display: flex; align-items: center; justify-content: center;
  min-width: 150px; min-height: 65px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--ink-mid);
  transition: border-color var(--t-mid), transform var(--t-mid);
}
.client-logo img {
  max-height: 80px; max-width: 190px; object-fit: contain;
  filter: grayscale(35%) brightness(1.05) opacity(0.75);
  transition: filter var(--t-mid);
}
.client-logo:hover { transform: translateY(-3px); border-color: var(--border-s); }
.client-logo:hover img { filter: grayscale(0%) brightness(1.15) opacity(1); }

/* ══════════════════════════════════════════
   ATTESTAZIONI
══════════════════════════════════════════ */
.attestati-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(265px,1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  margin-top: 2.5rem;
}
.attestato-card {
  background: var(--ink-mid); padding: 1.4rem 1.5rem;
  display: flex; align-items: flex-start; gap: 0.9rem;
  transition: background var(--t-mid);
}
.attestato-card:hover { background: var(--ink-soft); }
.attestato-icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--azure); opacity: 0.7; margin-top: 2px; }
.attestato-icon svg { width: 100%; height: 100%; }
.attestato-body { display: flex; flex-direction: column; gap: 2px; }
.attestato-title { font-size: var(--fs-sm); font-weight: 700; color: var(--white); }
.attestato-ente { font-size: 0.74rem; color: var(--azure); margin-top: 1px; }
.attestato-anno { font-size: 0.7rem; color: var(--grey-dark); font-style: italic; }
.attestato-pdf {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.65rem;
  padding: 0.27rem 0.65rem; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azure); border: 1px solid rgba(154,218,255,0.28); border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.attestato-pdf:hover { background: var(--azure); color: var(--primary); }

/* ══════════════════════════════════════════
   CONTATTI
══════════════════════════════════════════ */
.contatti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.contact-row { display: flex; gap: 1rem; margin-bottom: 1.4rem; align-items: flex-start; }
.contact-icon-wrap svg { width: 18px; height: 18px; color: var(--azure); flex-shrink: 0; margin-top: 3px; }
.contact-label { font-size: 0.6rem; color: var(--grey-dark); text-transform: uppercase; letter-spacing: 0.14em; }
.contact-val { font-weight: 500; color: var(--grey-light); margin-top: 2px; font-size: var(--fs-base); }
.contact-val a { color: var(--grey-light); }
.contact-val a:hover { color: var(--azure); }

.albo-box {
  display: flex; gap: 0.9rem; align-items: center;
  margin-top: 6px; margin-bottom: 6px; padding: 0.9rem 1.1rem;
  background: rgba(154,218,255,0.04); border: 1px solid var(--border);
  border-left: 2px solid var(--azure); border-radius: var(--r-sm);
  transition: border-color var(--t-fast);
}
.albo-box:hover { border-color: var(--border-s); }
.albo-box svg { width: 18px; color: var(--azure); flex-shrink: 0; opacity: 0.75; }
.albo-strong { font-weight: 700; font-size: var(--fs-sm); color: var(--white); }

/* Mappa OpenStreetMap */
.map-wrap {
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border);
  transition: border-color var(--t-mid);
}
.map-wrap:hover { border-color: var(--border-s); }
.map-wrap iframe {
  display: block;
  filter: grayscale(55%) brightness(0.8) contrast(1.1);
  transition: filter 0.4s;
}
.map-wrap:hover iframe { filter: grayscale(25%) brightness(0.88) contrast(1.06); }
.map-link {
  display: flex; justify-content: flex-end; padding: 0.5rem 0.9rem;
  background: var(--ink-mid); border-top: 1px solid var(--border);
}
.map-link a { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--azure); }
.map-link a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.3rem var(--pad-x);
  background: var(--ink-deep);
  border-top: 1px solid var(--border);
  font-size: 0.71rem; color: var(--grey-dark);
}
.footer-brand { font-weight: 500; letter-spacing: 0.02em; }
.footer-brand span { color: var(--azure); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .pan-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .has-mega:hover .mega-menu { display: none; }

  #hero { grid-template-columns: 1fr; min-height: auto; padding: 4rem 5% 3rem; }
  .hero-title { font-size: 3.2rem; }
  .hero-desc { font-size: 0.9rem; }
  .hero-stats { flex-wrap: wrap; gap: 1.5rem; }
  .hero-cards { grid-template-columns: 1fr 1fr; }

  section { padding: 60px 5%; }
  .sec-title { font-size: 2rem; }

  .pan-grid { grid-template-columns: repeat(2,1fr); }
  .lead-grid { grid-template-columns: 1fr; gap: 40px; }
  .lead-form-col { padding: 36px 24px; }
  .contatti-grid { grid-template-columns: 1fr; gap: 30px; }
  footer { flex-direction: column; gap: 0.5rem; text-align: center; }
}
@media (max-width: 480px) {
  nav { padding: 0 1.2rem; height: 60px; }
  .mobile-menu { top: 60px; }
  #hero { padding: 3rem 1.2rem 2rem; }
  .hero-title { font-size: 2.6rem; }
  .hero-cards { grid-template-columns: 1fr; }
  section { padding: 44px 1.2rem; }
  .sec-title { font-size: 1.65rem; }
  .pan-grid { grid-template-columns: 1fr; }
  .attestati-grid { grid-template-columns: 1fr; }
  .service-cat-header { padding: 16px 14px; }
  .cat-hdr-title { font-size: 0.93rem; }
  .lead-form-col { padding: 28px 18px; }
  footer { padding: 1.2rem; font-size: 0.7rem; }
}

/* ── PRIVACY MODAL ─────────────────────────────────────────── */
.privacy-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.privacy-modal-overlay.open { display: flex; }

.privacy-modal {
  background: var(--ink-mid);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-deep);
  animation: modalIn 0.28s var(--ease-spring);
}
@keyframes modalIn {
  from { opacity:0; transform: translateY(18px) scale(0.97); }
  to   { opacity:1; transform: translateY(0)    scale(1); }
}

.privacy-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 1.6rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.privacy-modal-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.privacy-modal-title span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--azure);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.privacy-modal-close {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--grey);
  background: none;
  flex-shrink: 0;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.privacy-modal-close:hover {
  border-color: var(--azure);
  color: var(--azure);
  background: var(--azure-pale);
}

.privacy-modal-body {
  padding: 1.4rem 1.6rem;
  overflow-y: auto;
  flex: 1;
  color: var(--grey);
  font-size: var(--fs-sm);
  line-height: 1.82;
}
.privacy-modal-body h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--white);
  margin: 1.4rem 0 0.5rem;
  border-bottom: 1px solid var(--border-sub);
  padding-bottom: 0.35rem;
}
.privacy-modal-body h3:first-child { margin-top: 0; }
.privacy-modal-body p { margin-bottom: 0.75rem; max-width: none; }
.privacy-modal-body ul {
  padding-left: 1.2rem;
  margin-bottom: 0.75rem;
}
.privacy-modal-body li { margin-bottom: 0.3rem; }
.privacy-modal-body strong { color: var(--grey-light); }
.privacy-modal-body a { color: var(--azure); }
.privacy-modal-body a:hover { text-decoration: underline; }
.privacy-modal-body .privacy-highlight {
  background: var(--azure-pale);
  border: 1px solid var(--border);
  border-left: 2px solid var(--azure);
  border-radius: var(--r-sm);
  padding: 0.8rem 1rem;
  margin: 0.75rem 0;
  font-size: 0.78rem;
  color: var(--grey);
}
.privacy-modal-body .privacy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin: 0.75rem 0;
}
.privacy-modal-body .privacy-table th,
.privacy-modal-body .privacy-table td {
  border: 1px solid var(--border);
  padding: 0.45rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.privacy-modal-body .privacy-table th {
  background: var(--ink-soft);
  color: var(--azure);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.65rem;
}

.privacy-modal-footer {
  padding: 1rem 1.6rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-shrink: 0;
}
.privacy-btn-close {
  padding: 0.65rem 1.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-mid) var(--ease-spring);
}
.privacy-btn-close.secondary {
  background: none;
  border: 1px solid var(--border);
  color: var(--grey);
}
.privacy-btn-close.secondary:hover {
  border-color: var(--azure);
  color: var(--azure);
}
.privacy-btn-close.primary {
  background: var(--azure);
  border: none;
  color: var(--ink-deep);
}
.privacy-btn-close.primary:hover {
  background: var(--azure-dark);
  transform: translateY(-1px);
}

/* Checkbox privacy migliorato */
.privacy-group-gdpr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 1.1rem 0;
  padding: 0.75rem 0.9rem;
  background: var(--azure-pale);
  border: 1px solid rgba(154,218,255,0.15);
  border-radius: var(--r-sm);
}
.privacy-group-gdpr input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--azure);
  width: 15px; height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.privacy-group-gdpr label {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.76rem;
  line-height: 1.55;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.privacy-group-gdpr label a {
  color: var(--azure);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.privacy-group-gdpr label a:hover { color: var(--azure-dark); }

@media (max-width: 480px) {
  .privacy-modal-header { padding: 1rem 1.1rem; }
  .privacy-modal-body   { padding: 1rem 1.1rem; }
  .privacy-modal-footer { padding: 0.8rem 1.1rem; }
}

/* ══════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════ */
#back-to-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 44px; height: 44px;
  border: 1px solid var(--border-s);
  background: rgba(22,30,41,0.92);
  color: var(--azure); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 900;
  opacity: 0; pointer-events: none;
  transform: translateY(10px) scale(0.9);
  transition: opacity var(--t-mid), transform var(--t-mid) var(--ease-spring),
              background var(--t-fast), border-color var(--t-fast);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: none; outline: none;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
#back-to-top:hover { background: var(--azure); color: var(--primary); }
#back-to-top svg { pointer-events: none; }

/* ══════════════════════════════════════════
   CANVAS PARTICELLE FULL PAGE
══════════════════════════════════════════ */
#page-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
}

/* ══════════════════════════════════════════
   NAV LINK ATTIVO
══════════════════════════════════════════ */
.nav-links > li > a.nav-active { color: var(--azure); }
.nav-links > li > a.nav-active::after { transform: scaleX(1); }

/* ══════════════════════════════════════════
   HERO FLOATING CARDS (animazione entrata)
══════════════════════════════════════════ */
.hero-cards { animation: heroCardsIn 0.9s 0.3s var(--ease-out) both; }
@keyframes heroCardsIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════
   LOADER PAGINA
══════════════════════════════════════════ */
#page-loader {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--ink-deep);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.55s var(--ease-out), visibility 0.55s;
}
#page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-ring {
  width: 42px; height: 42px;
  border: 1.5px solid var(--border);
  border-top-color: var(--azure);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

</style>

			<link rel="icon" href="https://www.carlomusso.it/wp-content/uploads/2026/03/favicon-palazzo-v2-150x150.png" sizes="32x32" />
<link rel="icon" href="https://www.carlomusso.it/wp-content/uploads/2026/03/favicon-palazzo-v2-300x300.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://www.carlomusso.it/wp-content/uploads/2026/03/favicon-palazzo-v2-300x300.png" />
<meta name="msapplication-TileImage" content="https://www.carlomusso.it/wp-content/uploads/2026/03/favicon-palazzo-v2-300x300.png" />
</head>
<body>
<canvas id="page-canvas" aria-hidden="true"></canvas>

<!-- ══ NAV ══ -->
<nav>
  <a href="#" class="nav-brand">
    <span class="nav-brand-name">Geom. <span>Carlo Musso</span></span>
    <span class="nav-brand-sub">Studio Tecnico · Genova</span>
  </a>
  <ul class="nav-links">
    <li class="has-mega">
      <a href="#servizi">Attività ▾</a>
      <div class="mega-menu" id="megaMenu">
        <div class="mega-col">
          <div class="mega-col-title">Pratiche Tecniche</div>
          <a href="#pratiche-edilizie" onclick="openItem('cat-01','pratiche-edilizie')">Pratiche Edilizie</a>
          <a href="#pratiche-catastali" onclick="openItem('cat-01','pratiche-catastali')">Pratiche Catastali</a>
          <a href="#rilievo-grafica" onclick="openItem('cat-01','rilievo-grafica')">Rilievo e Restituzione</a>
          <a href="#progettazione" onclick="openItem('cat-01','progettazione')">Progettazione</a>
          <a href="#consulenze-tecniche" onclick="openItem('cat-01','consulenze-tecniche')">Consulenze Tecniche</a>
          <a href="#autorizzazioni-enti" onclick="openItem('cat-01','autorizzazioni-enti')">Autorizzazioni Enti</a>
          <a href="#consulenze-parte" onclick="openItem('cat-01','consulenze-parte')">Consulenze di Parte</a>
          <a href="#perizie" onclick="openItem('cat-01','perizie')">Perizie</a>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Attività Edilizia</div>
          <a href="#direzione-lavori" onclick="openItem('cat-02','direzione-lavori')">Direzione Lavori</a>
          <a href="#contratti-appalto" onclick="openItem('cat-02','contratti-appalto')">Contratti di Appalto</a>
          <a href="#collaudi-tecnici" onclick="openItem('cat-02','collaudi-tecnici')">Collaudi Tecnici</a>
          <a href="#computi-metrici" onclick="openItem('cat-02','computi-metrici')">Computi Metrici</a>
          <a href="#contabilita-cantiere" onclick="openItem('cat-02','contabilita-cantiere')">Contabilità Cantiere</a>
          <a href="#coordinamento-sicurezza" onclick="openItem('cat-02','coordinamento-sicurezza')">Coordinamento Sicurezza</a>
          <a href="#agevolazioni-fiscali" onclick="openItem('cat-02','agevolazioni-fiscali')">Agevolazioni Fiscali</a>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Topografia</div>
          <a href="#rilievi-topografici" onclick="openItem('cat-03','rilievi-topografici')">Rilievi Topografici</a>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Immobiliare</div>
          <a href="#studi-fattibilita" onclick="openItem('cat-04','studi-fattibilita')">Studi di Fattibilità</a>
          <a href="#ricerche-mercato" onclick="openItem('cat-02','ricerche-mercato')">Ricerche di Mercato</a>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Gestione Immobili</div>
          <a href="#regolamento-condominio" onclick="openItem('cat-05','regolamento-condominio')">Regolamenti Condominio</a>
          <a href="#efficientamenti-energetici" onclick="openItem('cat-05','efficientamenti-energetici')">Efficientamenti Energetici</a>
          <a href="#tabelle-millesimali" onclick="openItem('cat-05','tabelle-millesimali')">Tabelle Millesimali</a>
        </div>
        <div class="mega-col">
          <div class="mega-col-title">Altri Servizi</div>
          <a href="#fotoinserimenti" onclick="openItem('cat-06','fotoinserimenti')">Fotoinserimenti</a>
          <a href="#rendering-esterni" onclick="openItem('cat-06','rendering-esterni')">Rendering Esterni</a>
          <a href="#rendering-interni" onclick="openItem('cat-06','rendering-interni')">Rendering Interni</a>
          <a href="#studi-illuminotecnica" onclick="openItem('cat-06','studi-illuminotecnica')">Illuminotecnica</a>
        </div>
      </div>
    </li>
    <li><a href="#panoramica">Panoramica</a></li>
    <li><a href="#clienti">Clienti</a></li>
    <li><a href="#attestazioni">Attestazioni</a></li>
    <li><a href="#contatti" class="nav-cta">Contatti</a></li>
  </ul>
  <button class="nav-hamburger" onclick="toggleMobileMenu(this)" aria-label="Menu">
    <span></span><span></span><span></span>
  </button>
</nav>
<div id="megaBridge"></div>

<!-- ══ MOBILE MENU ══ -->
<div class="mobile-menu" id="mobileMenu">
  <div class="mobile-menu-section">
    <div class="mobile-menu-title">Pratiche Tecniche</div>
    <a href="#pratiche-edilizie" onclick="closeMobileMenu();openItem('cat-01','pratiche-edilizie')">Pratiche Edilizie</a>
    <a href="#pratiche-catastali" onclick="closeMobileMenu();openItem('cat-01','pratiche-catastali')">Pratiche Catastali</a>
    <a href="#progettazione" onclick="closeMobileMenu();openItem('cat-01','progettazione')">Progettazione</a>
    <a href="#consulenze-tecniche" onclick="closeMobileMenu();openItem('cat-01','consulenze-tecniche')">Consulenze Tecniche</a>
    <a href="#perizie" onclick="closeMobileMenu();openItem('cat-01','perizie')">Perizie</a>
  </div>
  <div class="mobile-menu-section">
    <div class="mobile-menu-title">Attività Edilizia</div>
    <a href="#direzione-lavori" onclick="closeMobileMenu();openItem('cat-02','direzione-lavori')">Direzione Lavori</a>
    <a href="#collaudi-tecnici" onclick="closeMobileMenu();openItem('cat-02','collaudi-tecnici')">Collaudi Tecnici</a>
    <a href="#computi-metrici" onclick="closeMobileMenu();openItem('cat-02','computi-metrici')">Computi Metrici</a>
    <a href="#coordinamento-sicurezza" onclick="closeMobileMenu();openItem('cat-02','coordinamento-sicurezza')">Coordinamento Sicurezza</a>
    <a href="#agevolazioni-fiscali" onclick="closeMobileMenu();openItem('cat-02','agevolazioni-fiscali')">Agevolazioni Fiscali</a>
  </div>
  <div class="mobile-menu-section">
    <div class="mobile-menu-title">Topografia · Immobiliare · Gestione</div>
    <a href="#rilievi-topografici" onclick="closeMobileMenu();openItem('cat-03','rilievi-topografici')">Rilievi Topografici</a>
    <a href="#studi-fattibilita" onclick="closeMobileMenu();openItem('cat-04','studi-fattibilita')">Studi di Fattibilità</a>
    <a href="#efficientamenti-energetici" onclick="closeMobileMenu();openItem('cat-05','efficientamenti-energetici')">Efficientamenti Energetici</a>
    <a href="#tabelle-millesimali" onclick="closeMobileMenu();openItem('cat-05','tabelle-millesimali')">Tabelle Millesimali</a>
  </div>
  <div class="mobile-menu-section">
    <div class="mobile-menu-title">Altri Servizi</div>
    <a href="#fotoinserimenti" onclick="closeMobileMenu();openItem('cat-06','fotoinserimenti')">Fotoinserimenti</a>
    <a href="#rendering-esterni" onclick="closeMobileMenu();openItem('cat-06','rendering-esterni')">Rendering Esterni</a>
    <a href="#studi-illuminotecnica" onclick="closeMobileMenu();openItem('cat-06','studi-illuminotecnica')">Studi di Illuminotecnica</a>
  </div>
  <a href="#contatti" class="mobile-menu-cta" onclick="closeMobileMenu()">Contattaci</a>
</div>

<!-- ══ HERO ══ -->
<section id="hero">
  <div class="hero-content fade-in-up">
    <div class="hero-tag">Studio Tecnico · Genova</div>
    <h1 class="hero-title">Geom.<br><em>Carlo</em><br>Musso</h1>
    <p class="hero-desc">Soluzioni tecniche complete per l'edilizia, la progettazione e la gestione immobiliare. Professionalità e competenza al servizio del tuo progetto.</p>
    <a href="#richiedi-consulenza" class="hero-cta">Richiedi una consulenza</a>
    <div class="hero-stats">
      <div class="hero-stat">
        <div class="hero-stat-label">Albo Geometri</div>
        <div class="hero-stat-value" data-count="3984" data-prefix="N° ">N° 3984</div>
      </div>
      <div class="hero-stat">
        <div class="hero-stat-label">Sede</div>
        <div class="hero-stat-value">Genova GE</div>
      </div>
      <div class="hero-stat">
        <div class="hero-stat-label">Telefono</div>
        <div class="hero-stat-value" style="white-space:nowrap">+39 349 381 3543</div>
      </div>
    </div>
  </div>

  <div class="hero-cards fade-in-up stagger">
    <div class="hero-card fade-in-up" onclick="openItem('cat-01','pratiche-edilizie');document.getElementById('servizi').scrollIntoView({behavior:'smooth'})">
      <div class="hero-card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 9h18M9 21V9"/></svg></div>
      <div class="hero-card-title">Pratiche Edilizie</div>
      <div class="hero-card-sub">CILA, SCIA, Permesso di Costruire</div>
    </div>
    <div class="hero-card fade-in-up" onclick="openItem('cat-01','progettazione');document.getElementById('servizi').scrollIntoView({behavior:'smooth'})">
      <div class="hero-card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 20h20M4 20V8l8-5 8 5v12"/><path d="M9 20v-6h6v6"/></svg></div>
      <div class="hero-card-title">Progettazione</div>
      <div class="hero-card-sub">Rilievo, grafica e restituzione</div>
    </div>
    <div class="hero-card fade-in-up" onclick="openItem('cat-02','direzione-lavori');document.getElementById('servizi').scrollIntoView({behavior:'smooth'})">
      <div class="hero-card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg></div>
      <div class="hero-card-title">Direzione Lavori</div>
      <div class="hero-card-sub">Gestione completa cantiere</div>
    </div>
    <div class="hero-card fade-in-up" onclick="openItem('cat-02','agevolazioni-fiscali');document.getElementById('servizi').scrollIntoView({behavior:'smooth'})">
      <div class="hero-card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>
      <div class="hero-card-title">Agevolazioni Fiscali</div>
      <div class="hero-card-sub">Supporto tecnico su bonus e detrazioni</div>
    </div>
    <div class="hero-card fade-in-up" onclick="openItem('cat-03','rilievi-topografici');document.getElementById('servizi').scrollIntoView({behavior:'smooth'})">
      <div class="hero-card-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg></div>
      <div class="hero-card-title">Rilievi Topografici</div>
      <div class="hero-card-sub">Stazione Totale Robotica Geomax</div>
    </div>
  </div>
</section>

<div class="azure-line"></div>

<!-- ══ PANORAMICA 4 CATEGORIE ══ -->
<!-- Sostituisce il vecchio blocco "Bonus Fiscali" -->
<section id="panoramica" class="fade-in-up">
  <div class="sec-header">
    <div class="sec-label">Aree di Competenza</div>
    <h2 class="sec-title">Quattro <em>Ambiti</em> Professionali</h2>
  </div>
  <div class="pan-grid stagger">

    <div class="pan-card fade-in-up">
      <div class="pan-num">01</div>
      <div class="pan-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 9h18M9 21V9"/></svg>
      </div>
      <div class="pan-title">Pratiche Tecnico-Amministrative</div>
      <div class="pan-desc">Elaborazione e deposito di pratiche edilizie e catastali presso Comuni, Agenzia delle Entrate e altri enti competenti. Dalla CILA al Permesso di Costruire, dalla variazione DOCFA alle autorizzazioni specialistiche: ogni iter viene gestito con rigore tecnico e piena conformità normativa.</div>
      <a class="pan-link" href="#servizi" onclick="document.getElementById('cat-01').classList.add('open')">
        Approfondisci
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>

    <div class="pan-card fade-in-up">
      <div class="pan-num">02</div>
      <div class="pan-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M2 20h20M4 20V8l8-5 8 5v12"/><path d="M9 20v-6h6v6"/></svg>
      </div>
      <div class="pan-title">Attività Edilizia</div>
      <div class="pan-desc">Direzione dei lavori, coordinamento della sicurezza in fase progettuale ed esecutiva, computi metrici estimativi, contabilità di cantiere e collaudo finale. Lo Studio affianca il committente in ogni fase del processo costruttivo, dalla pianificazione economica all'ultimazione dell'opera.</div>
      <a class="pan-link" href="#servizi" onclick="document.getElementById('cat-02').classList.add('open')">
        Approfondisci
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>

    <div class="pan-card fade-in-up">
      <div class="pan-num">03</div>
      <div class="pan-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
      </div>
      <div class="pan-title">Topografia</div>
      <div class="pan-desc">Rilievi topografici eseguiti con stazione totale robotica <strong style="color:var(--grey-light)">Geomax Zoom 95</strong>, strumentazione di precisione che consente l'acquisizione geometrica accurata anche in contesti complessi. Restituzione in formato DWG, PDF e DXF per uso progettuale, catastale e urbanistico.</div>
      <a class="pan-link" href="#servizi" onclick="document.getElementById('cat-03').classList.add('open')">
        Approfondisci
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>

    <div class="pan-card fade-in-up">
      <div class="pan-num">04</div>
      <div class="pan-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="2" y="7" width="20" height="14" rx="1"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
      </div>
      <div class="pan-title">Settore Immobiliare</div>
      <div class="pan-desc">Studi di fattibilità tecnico-economica, perizie di stima, ricerche comparative di mercato, gestione condominiale e redazione di tabelle millesimali. Lo Studio supporta privati, professionisti e aziende nelle decisioni relative al patrimonio immobiliare, con analisi documentate e valutazioni certificate.</div>
      <a class="pan-link" href="#servizi" onclick="document.getElementById('cat-04').classList.add('open')">
        Approfondisci
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>

  </div>
</section>

<div class="azure-line"></div>

<!-- ══ SERVIZI ══ -->
<section id="servizi" class="fade-in-up">
  <div class="sec-header">
    <div class="sec-label">Competenze</div>
    <h2 class="sec-title">I Nostri <em>Servizi</em></h2>
  </div>
  <div class="service-categories">

    <!-- CAT 01 — Pratiche Tecnico-Amministrative -->
    <div class="service-cat" id="cat-01">
      <div class="service-cat-header" onclick="toggleCat(this)">
        <div class="cat-hdr-left">
          <span class="cat-hdr-num">01</span>
          <span class="cat-hdr-title">Pratiche Tecnico-Amministrative</span>
          <span class="cat-hdr-count">8 servizi</span>
        </div>
        <div class="cat-toggle"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 1v10M1 6h10"/></svg></div>
      </div>
      <div class="service-cat-body">
        <div class="service-items">

          <div class="service-item" id="pratiche-edilizie">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Elaborazione Pratiche Edilizie</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Il D.Lgs n. 380 del 6 giugno 2001 (Testo Unico sull'Edilizia) stabilisce a livello nazionale le linee guida che regolamentano tutta l'attività edilizia. In relazione al tipo di attività che si intende svolgere e alla zona in cui è collocata, per tutte le opere che non rientrano nell'attività di edilizia libera, è necessario elaborare e presentare una pratica edilizia a tutti gli enti competenti. Tali pratiche si differenziano per campi di applicazione e sono solitamente riconducibili a <strong>CILA</strong>, <strong>Permesso di Costruire</strong> e <strong>SCIA</strong>.</p></div>
          </div>

          <div class="service-item" id="pratiche-catastali">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Pratiche Catastali (DOCFA)</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Il catasto è l'inventario di tutti i beni immobili esistenti sul territorio nazionale. La normativa nazionale sancisce l'obbligo di aggiornare il catasto ogni volta intervenga una modifica del bene censito: frazionamento, unione di immobili, modifiche interne, compravendita, successione o donazione. Tali aggiornamenti sono presentabili su piattaforma informatica dell'Agenzia delle Entrate mediante il software <strong>DOCFA</strong>, da parte di tecnici abilitati.</p></div>
          </div>

          <div class="service-item" id="rilievo-grafica">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Rilievo e Restituzione Grafica di Immobili</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>La rappresentazione grafica di un immobile si rende necessaria per la presentazione di progetti, variazioni catastali e pratiche comunali diverse. Prevede il rilievo dello stato dei luoghi mediante strumenti di misurazione diretta, seguito dall'elaborazione grafica con <strong>AutoCAD</strong>. La restituzione avviene su carta o in formato digitale <strong>DWG, PDF, DXF, JPEG</strong>.</p></div>
          </div>

          <div class="service-item" id="progettazione">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Progettazione</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>La fase di progettazione è necessaria per realizzare o modificare un immobile. Costituisce il punto di partenza per qualsiasi pratica edilizia nel rispetto del complesso quadro normativo nazionale. Nel progetto vengono studiati lo stile architettonico, le divisioni interne, le dimensioni dei vani, la scelta dei materiali, il costo dell'opera e tutte le informazioni necessarie a raggiungere gli obiettivi del committente.</p></div>
          </div>

          <div class="service-item" id="consulenze-tecniche">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Consulenze Tecniche</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Consulenza professionale su questioni tecniche inerenti l'edilizia, l'urbanistica e la normativa di settore. Lo studio fornisce supporto tecnico per valutazioni, verifiche e analisi necessarie a orientare correttamente le scelte del committente in ambito costruttivo e immobiliare.</p></div>
          </div>

          <div class="service-item" id="autorizzazioni-enti">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Autorizzazioni Enti Vari</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Elaborazione e presentazione di pratiche autorizzative presso enti diversi: Comuni, Soprintendenza, Regione, ARPAL, Autorità Portuale e altri enti competenti. Il servizio copre l'intero iter burocratico, dalla predisposizione della documentazione tecnica alla presentazione e al monitoraggio della pratica.</p></div>
          </div>

          <div class="service-item" id="consulenze-parte">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Consulenze Tecniche di Parte</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Supporto tecnico specializzato nell'ambito di controversie giudiziarie o stragiudiziali, con predisposizione di relazioni tecniche di parte. Il Geometra assiste il cliente nella fase istruttoria e durante le operazioni peritali disposte dal Tribunale o concordate tra le parti.</p></div>
          </div>

          <div class="service-item" id="perizie">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Perizie</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Redazione di perizie tecniche per la stima del valore di mercato degli immobili, per la valutazione di danni, per la verifica dello stato dei luoghi e per ogni altra finalità che richieda una valutazione tecnico-estimativa professionale certificata.</p></div>
          </div>

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

    <!-- CAT 02 — Attività Edilizia (include agevolazioni fiscali) -->
    <div class="service-cat" id="cat-02">
      <div class="service-cat-header" onclick="toggleCat(this)">
        <div class="cat-hdr-left">
          <span class="cat-hdr-num">02</span>
          <span class="cat-hdr-title">Attività Edilizia</span>
          <span class="cat-hdr-count">10 servizi</span>
        </div>
        <div class="cat-toggle"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 1v10M1 6h10"/></svg></div>
      </div>
      <div class="service-cat-body">
        <div class="service-items">

          <div class="service-item" id="direzione-lavori">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Direzione dei Lavori</span><span class="item-toggle">+</span></div>
            <div class="service-item-body">
              <p>La figura del Direttore dei Lavori è fondamentale e obbligatoria per legge per le opere edilizie private soggette a permesso di costruire. Il DL tutela gli interessi del committente per tutta la durata dell'appalto, vigilando sull'esecuzione a regola d'arte. Le attività comprendono:</p>
              <ul>
                <li>Consegna dei lavori e controllo dei materiali strutturali</li>
                <li>Prove su impianti idrico-sanitari e di climatizzazione</li>
                <li>Contabilità e stati di avanzamento lavori</li>
                <li>Verifica delle misure di sicurezza (POS/PSC)</li>
                <li>Emissione di ordini di servizio e certificati di pagamento</li>
                <li>Redazione perizie di variante, verbali di ultimazione e collaudo</li>
              </ul>
            </div>
          </div>

          <div class="service-item" id="contratti-appalto">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Contratti di Appalto</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Elaborazione di contratti di appalto per lavori privati nel rispetto delle norme stabilite dal Libro Quarto, Titolo III, Capo VII del Codice Civile. Il contratto definisce diritti e obblighi tra committente e appaltatore, garantendo tutele contrattuali complete per entrambe le parti.</p></div>
          </div>

          <div class="service-item">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Capitolati Speciali di Appalto</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Redazione di capitolati speciali d'appalto che definiscono nel dettaglio le modalità esecutive, le specifiche tecniche dei materiali, le qualità delle lavorazioni e le norme di misurazione e contabilizzazione delle opere edili.</p></div>
          </div>

          <div class="service-item" id="collaudi-tecnici">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Collaudi Tecnici</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Esecuzione di collaudi tecnici al termine dei lavori edili per verificare la conformità delle opere eseguite al progetto approvato, alle prescrizioni contrattuali e alle normative vigenti in materia di costruzioni.</p></div>
          </div>

          <div class="service-item" id="rspp">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">RSPP – Responsabile del Servizio di Prevenzione e Protezione</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Prestazioni professionali in qualità di Responsabile del Servizio di Prevenzione e Protezione ai sensi del D.Lgs 81/2008. Il servizio comprende la valutazione dei rischi, la redazione del DVR e la gestione della sicurezza aziendale.</p></div>
          </div>

          <div class="service-item" id="computi-metrici">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Computi Metrici Estimativi</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Elaborazione di computi metrici estimativi per la quantificazione e la valorizzazione economica delle opere edili previste in progetto, con riferimento ai prezziari ufficiali e alle analisi dei prezzi di mercato.</p></div>
          </div>

          <div class="service-item" id="ricerche-mercato">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Ricerche di Mercato</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Ricerche di mercato, analisi dei prezzi e redazione di relazioni tecnico-qualitative per la valutazione comparativa di materiali, lavorazioni e fornitori nel settore edile e immobiliare.</p></div>
          </div>

          <div class="service-item" id="contabilita-cantiere">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Contabilità di Cantiere</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Gestione completa della contabilità di cantiere: libretto delle misure, registro di contabilità, stati di avanzamento lavori, certificati di pagamento e conto finale. Attività svolta nel rispetto del capitolato speciale d'appalto e delle normative vigenti.</p></div>
          </div>

          <div class="service-item" id="coordinamento-sicurezza">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Coordinamento della Sicurezza</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Coordinamento della sicurezza in fase di progettazione (CSP) ed esecuzione (CSE) ai sensi del D.Lgs 81/2008, con redazione del Piano di Sicurezza e Coordinamento (PSC) e del Fascicolo dell'Opera.</p></div>
          </div>

          <!-- ══ AGEVOLAZIONI FISCALI — integrate in Attività Edilizia ══ -->
          <div class="service-item" id="agevolazioni-fiscali">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Agevolazioni Fiscali e Incentivi per Interventi Edilizi</span><span class="item-toggle">+</span></div>
            <div class="service-item-body">
              <p>Dal 2020 lo Studio supporta i committenti nella pianificazione e nella gestione tecnica degli interventi edilizi agevolati, dalla verifica di ammissibilità alla presentazione delle pratiche ENEA. Il servizio comprende l'analisi della normativa vigente, la predisposizione della documentazione obbligatoria e il coordinamento con i professionisti fiscali del committente.</p>
              <p>Le principali agevolazioni seguite dallo Studio:</p>
              <div class="agevol-badge">
                <span class="agevol-tag">Superbonus 110%</span>
                <span class="agevol-tag">Ecobonus 65%</span>
                <span class="agevol-tag">Bonus Facciate 60%</span>
                <span class="agevol-tag">Bonus Casa 50%</span>
              </div>
              <p>Per ciascuna agevolazione lo Studio si occupa della verifica tecnica di idoneità dell'intervento, della redazione degli elaborati progettuali obbligatori, dell'asseverazione energetica e della trasmissione dei dati al portale ENEA nelle forme e nei termini di legge.</p>
            </div>
          </div>

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

    <!-- CAT 03 — Topografia -->
    <div class="service-cat" id="cat-03">
      <div class="service-cat-header" onclick="toggleCat(this)">
        <div class="cat-hdr-left">
          <span class="cat-hdr-num">03</span>
          <span class="cat-hdr-title">Topografia</span>
          <span class="cat-hdr-count">1 servizio</span>
        </div>
        <div class="cat-toggle"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 1v10M1 6h10"/></svg></div>
      </div>
      <div class="service-cat-body">
        <div class="service-items">
          <div class="service-item" id="rilievi-topografici">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Rilievi Topografici</span><span class="item-toggle">+</span></div>
            <div class="service-item-body">
              <p>I rilievi topografici vengono eseguiti con strumentazione di precisione, avvalendosi di una <strong>stazione totale robotica Geomax Zoom 95</strong>, che consente l'acquisizione accurata e completa di tutte le informazioni geometriche necessarie a definire con esattezza l'area e i manufatti oggetto di rilievo. Grazie alla tecnologia robotica, è possibile operare anche in condizioni complesse garantendo elevata precisione e rapidità di esecuzione.</p>
              <p>Nel corso degli anni lo Studio ha condotto numerosi rilievi di aree destinate alla trasformazione urbanistica, edilizia e infrastrutturale, maturando una consolidata esperienza nella restituzione grafica in formato <strong>DWG, DXF, PDF</strong>.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- CAT 04 — Settore Immobiliare -->
    <div class="service-cat" id="cat-04">
      <div class="service-cat-header" onclick="toggleCat(this)">
        <div class="cat-hdr-left">
          <span class="cat-hdr-num">04</span>
          <span class="cat-hdr-title">Settore Immobiliare</span>
          <span class="cat-hdr-count">1 servizio</span>
        </div>
        <div class="cat-toggle"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 1v10M1 6h10"/></svg></div>
      </div>
      <div class="service-cat-body">
        <div class="service-items">
          <div class="service-item" id="studi-fattibilita">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Studi di Fattibilità</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Analisi tecnico-economica preliminare per valutare la realizzabilità di un intervento immobiliare o edilizio. Lo studio di fattibilità comprende la verifica della conformità urbanistica, la stima dei costi e dei tempi, l'analisi dei rischi e la valutazione del ritorno sull'investimento.</p></div>
          </div>
        </div>
      </div>
    </div>

    <!-- CAT 05 — Gestione Immobili -->
    <div class="service-cat" id="cat-05">
      <div class="service-cat-header" onclick="toggleCat(this)">
        <div class="cat-hdr-left">
          <span class="cat-hdr-num">05</span>
          <span class="cat-hdr-title">Gestione degli Immobili</span>
          <span class="cat-hdr-count">4 servizi</span>
        </div>
        <div class="cat-toggle"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 1v10M1 6h10"/></svg></div>
      </div>
      <div class="service-cat-body">
        <div class="service-items">
          <div class="service-item" id="regolamento-condominio">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Redazione Regolamenti di Condominio</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Redazione di regolamenti condominiali contrattuali e assembleari nel rispetto del Codice Civile e della normativa vigente, con definizione delle norme d'uso delle parti comuni, degli obblighi dei condomini e delle sanzioni applicabili.</p></div>
          </div>
          <div class="service-item" id="efficientamenti-energetici">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Efficientamenti Energetici</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Analisi e progettazione di interventi di miglioramento dell'efficienza energetica degli edifici, con elaborazione dell'APE (Attestato di Prestazione Energetica) e supporto nell'accesso ai bonus fiscali correlati (Ecobonus, Superbonus).</p></div>
          </div>
          <div class="service-item" id="tabelle-millesimali">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Tabelle Millesimali</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Elaborazione e revisione delle tabelle millesimali per la ripartizione delle spese condominiali, nel rispetto dei criteri stabiliti dal Codice Civile e dalla giurisprudenza, con valutazione di tutte le caratteristiche fisiche ed economiche delle singole unità immobiliari.</p></div>
          </div>
          <div class="service-item">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Consulenze Tecniche per Immobili</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Consulenza tecnica specializzata per la gestione e valorizzazione del patrimonio immobiliare: valutazioni, verifiche normative, supporto nelle transazioni immobiliari e assistenza nella risoluzione di controversie condominiali.</p></div>
          </div>
        </div>
      </div>
    </div>

    <!-- CAT 06 — Altri Servizi -->
    <div class="service-cat" id="cat-06">
      <div class="service-cat-header" onclick="toggleCat(this)">
        <div class="cat-hdr-left">
          <span class="cat-hdr-num">06</span>
          <span class="cat-hdr-title">Altri Servizi</span>
          <span class="cat-hdr-count">4 servizi</span>
        </div>
        <div class="cat-toggle"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 1v10M1 6h10"/></svg></div>
      </div>
      <div class="service-cat-body">
        <div class="service-items">
          <div class="service-item" id="fotoinserimenti">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Fotoinserimenti</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Elaborazione di fotoinserimenti per la rappresentazione visiva di un progetto nel contesto reale, facilitando la comprensione dell'intervento edilizio da parte del committente e degli enti competenti.</p></div>
          </div>
          <div class="service-item" id="rendering-esterni">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Rendering di Esterni</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Realizzazione di immagini tridimensionali fotorealistiche degli esterni degli edifici, con simulazione di luci, ombre e materiali. Utile per la presentazione al committente, per pratiche edilizie e per la comunicazione del progetto.</p></div>
          </div>
          <div class="service-item" id="rendering-interni">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Rendering di Interni</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Rendering fotorealistici degli spazi interni con simulazione di materiali, arredi, illuminazione naturale e artificiale. Ideale per la presentazione al committente delle scelte progettuali prima dell'esecuzione dei lavori.</p></div>
          </div>
          <div class="service-item" id="studi-illuminotecnica">
            <div class="service-item-header" onclick="toggleItem(this)"><span class="item-title">Studi di Illuminotecnica</span><span class="item-toggle">+</span></div>
            <div class="service-item-body"><p>Progettazione e simulazione degli impianti di illuminazione interna ed esterna, con calcolo dei livelli di illuminamento, analisi dell'efficienza energetica e ottimizzazione del comfort visivo negli spazi abitativi e lavorativi.</p></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

<div class="azure-line"></div>

<!-- ══ RICHIEDI CONSULENZA ══ -->
<section class="lead-section fade-in-up" id="richiedi-consulenza">
  <div class="lead-grid">
    <div class="lead-text-col">
      <span class="sec-label">Richiedi una Consulenza</span>
      <h2>Progettiamo Insieme il Futuro del Tuo Immobile</h2>
      <p>Affidare un progetto edilizio o una pratica urbanistica al giusto professionista è il primo passo per garantirne il successo. Compila il modulo e sarai ricontattato entro 24 ore.</p>
      <div class="lead-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="20 6 9 17 4 12"/></svg> Risposta entro 24 ore</div>
      <div class="lead-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="20 6 9 17 4 12"/></svg> Prima consulenza gratuita</div>
      <div class="lead-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="20 6 9 17 4 12"/></svg> Preventivo senza impegno</div>
    </div>
    <div class="lead-form-col">
      
<div class="wpcf7 no-js" id="wpcf7-f288-o1" lang="it-IT" dir="ltr" data-wpcf7-id="288">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
<form action="/#wpcf7-f288-o1" method="post" class="wpcf7-form init" aria-label="Modulo di contatto" novalidate="novalidate" data-status="init">
<fieldset class="hidden-fields-container"><input type="hidden" name="_wpcf7" value="288" /><input type="hidden" name="_wpcf7_version" value="6.1.6" /><input type="hidden" name="_wpcf7_locale" value="it_IT" /><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f288-o1" /><input type="hidden" name="_wpcf7_container_post" value="0" /><input type="hidden" name="_wpcf7_posted_data_hash" value="" />
</fieldset>
<div class="form-group">
	<p><span class="wpcf7-form-control-wrap" data-name="your-name"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Nome e Cognome" value="" type="text" name="your-name" /></span>
	</p>
</div>
<div class="form-group">
	<p><span class="wpcf7-form-control-wrap" data-name="your-phone"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Telefono" value="" type="tel" name="your-phone" /></span>
	</p>
</div>
<div class="form-group">
	<p><span class="wpcf7-form-control-wrap" data-name="your-email"><input size="40" maxlength="400" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Indirizzo Email" value="" type="email" name="your-email" /></span>
	</p>
</div>
<div class="form-group">
	<p><span class="wpcf7-form-control-wrap" data-name="your-message"><textarea cols="40" rows="10" maxlength="2000" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Descrivi la tua richiesta..." name="your-message"></textarea></span>
	</p>
</div>
<div class="privacy-group">
	<p><span class="wpcf7-form-control-wrap" data-name="your-consent"><span class="wpcf7-form-control wpcf7-acceptance"><span class="wpcf7-list-item"><label><input type="checkbox" name="your-consent" value="1" aria-invalid="false" /><span class="wpcf7-list-item-label">Dichiaro di aver letto l'Informativa sulla <a href="/privacy-policy" target="_blank">Privacy</a> e accetto i Termini e Condizioni.</span></label></span></span></span>
	</p>
</div>
<p><input class="wpcf7-form-control wpcf7-submit has-spinner btn-submit" type="submit" value="Invia Richiesta" />
</p><div class="wpcf7-response-output" aria-hidden="true"></div>
</form>
</div>
    </div>
  </div>
</section>

<div class="azure-line"></div>

<!-- ══ CLIENTI ══ -->
<section id="clienti" class="fade-in-up">
  <div class="sec-header">
    <div class="sec-label">Riferimenti</div>
    <h2 class="sec-title">I Nostri <em>Clienti</em></h2>
    <p style="font-size:0.82rem;color:var(--grey-dark);font-style:italic;margin-top:0.5rem">Alcune delle realtà con cui lo Studio ha collaborato nel corso degli anni.</p>
  </div>
  <div class="clients-grid">
    <div class="client-logo"><img src="https://www.carlomusso.it/wp-content/uploads/2026/03/Logo_actuel_de_Norauto-scaled.png" alt="Norauto S.p.A." loading="lazy" width="190" height="80"></div>
    <div class="client-logo"><img src="https://www.carlomusso.it/wp-content/uploads/2026/03/429-4299075_explore-e3-e6-rina-type-approval-rina-consulting.png" alt="RINA Consulting" loading="lazy" width="190" height="80"></div>
    <div class="client-logo"><img src="https://www.carlomusso.it/wp-content/uploads/2026/03/pellegrini-escavazioni.png" alt="Pellegrini Escavazioni" loading="lazy" width="190" height="80"></div>
  </div>
</section>

<div class="azure-line"></div>

<!-- ══ ATTESTAZIONI ══ -->
<section id="attestazioni" class="sec-alt fade-in-up">
  <div class="sec-header">
    <div class="sec-label">Formazione</div>
    <h2 class="sec-title">Attestazioni <em>&amp; Corsi</em></h2>
    <p style="font-size:0.82rem;color:var(--grey-dark);font-style:italic;margin-top:0.5rem">Qualifiche, attestati e corsi di aggiornamento professionale conseguiti dallo Studio.</p>
  </div>
  <div class="attestati-grid">
    <div class="attestato-card">
      <div class="attestato-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
      <div class="attestato-body">
        <div class="attestato-title">Corso BIM Avanzato</div>
        <div class="attestato-ente">Centro di Formazione Professionale</div>
        <a class="attestato-pdf" href="https://www.carlomusso.it/wp-content/uploads/2026/03/ATC_EM1218409646476_Corso-Revit-Avanzato-ed.-1.pdf" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
          Visualizza PDF
        </a>
      </div>
    </div>
    <div class="attestato-card">
      <div class="attestato-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
      <div class="attestato-body">
        <div class="attestato-title">Corso BIM Base</div>
        <div class="attestato-ente">Centro di Formazione Professionale</div>
        <a class="attestato-pdf" href="https://www.carlomusso.it/wp-content/uploads/2026/03/ATC_EM1218409641811_Corso-BIM-Revit-Base-ed.-1.pdf" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
          Visualizza PDF
        </a>
      </div>
    </div>
    <div class="attestato-card">
      <div class="attestato-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
      <div class="attestato-body">
        <div class="attestato-title">Coordinatore della Sicurezza</div>
        <div class="attestato-ente">Ente Formatore Accreditato</div>
        <a class="attestato-pdf" href="https://www.carlomusso.it/wp-content/uploads/2026/03/Attestato_CS5.21_Musso_Carlo.pdf" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
          Visualizza PDF
        </a>
      </div>
    </div>
    <div class="attestato-card">
      <div class="attestato-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
      <div class="attestato-body">
        <div class="attestato-title">Abilitazione Amministratori di Condominio</div>
        <div class="attestato-ente">ANACI</div>
        <a class="attestato-pdf" href="https://www.carlomusso.it/wp-content/uploads/2026/03/Attestato-ANACI.pdf" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
          Visualizza PDF
        </a>
      </div>
    </div>
    <div class="attestato-card">
      <div class="attestato-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
      <div class="attestato-body">
        <div class="attestato-title">Certificatore Energetico</div>
        <div class="attestato-ente">Regione Liguria</div>
        <div class="attestato-anno">N. 10132</div>
        <a class="attestato-pdf" href="https://www.carlomusso.it/wp-content/uploads/2026/03/CENNAZBI12.25_Musso-Carlo-2.pdf" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
          Visualizza PDF
        </a>
      </div>
    </div>
  </div>
</section>

<div class="azure-line"></div>

<!-- ══ CONTATTI ══ -->
<section id="contatti" class="fade-in-up">
  <div class="sec-header">
    <div class="sec-label">Dove Siamo</div>
    <h2 class="sec-title"><em>Contatti</em></h2>
  </div>
  <div class="contatti-grid">
    <div>
      <div class="contact-row">
        <div class="contact-icon-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg></div>
        <div>
          <div class="contact-label">Indirizzo</div>
          <div class="contact-val"><a href="https://www.openstreetmap.org/?mlat=44.3994&mlon=8.9440#map=17/44.3994/8.9440" target="_blank" rel="noopener">Corso Aurelio Saffi 1/7 — 16128 Genova GE</a></div>
        </div>
      </div>
      <div class="contact-row">
        <div class="contact-icon-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 9.72 19.79 19.79 0 0 1 2 1.18 2 2 0 0 1 3.99 0h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 7.91a16 16 0 0 0 5.61 5.61l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 14v2.92z"/></svg></div>
        <div>
          <div class="contact-label">Telefono</div>
          <div class="contact-val" style="white-space:nowrap"><a href="tel:+393493813543">+39 349 381 3543</a></div>
        </div>
      </div>
      <div class="contact-row">
        <div class="contact-icon-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div>
        <div>
          <div class="contact-label">Email</div>
          <div class="contact-val">geom.carlo.musso&#64;gmail.com</div>
        </div>
      </div>
      <div class="contact-row">
        <div class="contact-icon-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 8l-10 6L2 8"/></svg></div>
        <div>
          <div class="contact-label">PEC</div>
          <div class="contact-val">carlo.musso1&#64;geopec.it</div>
        </div>
      </div>
      <div class="albo-box">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        <div class="albo-strong">Iscrizione Albo dei Geometri N. 3984</div>
      </div>
      <div class="albo-box">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg>
        <div class="albo-strong">Certificatore Energetico Regione Liguria N. 10132</div>
      </div>
    </div>

    <div>
      <!-- ══ MAPPA: OpenStreetMap — nessuna API key richiesta ══ -->
      <div class="map-wrap">
        <iframe
          src="https://www.openstreetmap.org/export/embed.html?bbox=8.9409%2C44.3974%2C8.9469%2C44.4014&layer=mapnik&marker=44.3994%2C8.9440"
          width="100%" height="340"
          frameborder="0"
          style="border:0; display:block;"
          allowfullscreen
          loading="lazy"
          title="Mappa Studio Tecnico Musso Carlo – Genova">
        </iframe>
        <div class="map-link">
          <a href="https://www.openstreetmap.org/?mlat=44.3994&mlon=8.9440#map=17/44.3994/8.9440" target="_blank" rel="noopener">
            Apri in OpenStreetMap ↗
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ PAGE LOADER ══ -->
<div id="page-loader" aria-hidden="true"><div class="loader-ring"></div></div>

<!-- ══ BACK TO TOP ══ -->
<button id="back-to-top" aria-label="Torna in cima">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M18 15l-6-6-6 6"/></svg>
</button>

<!-- ══ FOOTER ══ -->
<footer>
  <div class="footer-brand">Geom. <span>Carlo Musso</span> · Studio Tecnico · Genova</div>
  <div>P.IVA 02671160998 — © 2026 Geom. Carlo Musso</div>
</footer>


<!-- ═══ MODAL INFORMATIVA PRIVACY / GDPR ═════════════════════════════════ -->
<div class="privacy-modal-overlay" id="privacyModal" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
  <div class="privacy-modal">

    <div class="privacy-modal-header">
      <div class="privacy-modal-title">
        <span>GDPR – Reg. UE 2016/679</span>
        Informativa sul Trattamento dei Dati Personali
      </div>
      <button class="privacy-modal-close" onclick="closePrivacyModal()" aria-label="Chiudi informativa privacy">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>

    <div class="privacy-modal-body" id="privacyModalBody">

      <div class="privacy-highlight">
        Ai sensi dell'art. 13 del Regolamento UE 2016/679 (GDPR) e del D.Lgs. 196/2003 come modificato dal D.Lgs. 101/2018 (Codice della Privacy), il Titolare del trattamento fornisce le seguenti informazioni sul trattamento dei dati personali conferiti tramite il modulo di richiesta consulenza presente su questo sito.
      </div>

      <h3>1. Titolare del Trattamento</h3>
      <p>
        <strong>Geom. Carlo Musso</strong> – Studio Tecnico<br>
        Corso Aurelio Saffi 17 – 16128 Genova (GE)<br>
        P.IVA: 02671160998<br>
        E-mail: <a href="mailto:geom.carlo.musso@gmail.com">geom.carlo.musso@gmail.com</a><br>
        PEC: <a href="mailto:carlo.musso1@geopec.it">carlo.musso1@geopec.it</a><br>
        Tel.: <a href="tel:+393493813543">+39 349 381 3543</a>
      </p>

      <h3>2. Dati Personali Raccolti</h3>
      <p>Tramite il modulo di contatto vengono raccolti i seguenti dati personali:</p>
      <ul>
        <li><strong>Nome e Cognome</strong> – identificazione dell'interessato</li>
        <li><strong>Numero di telefono</strong> – per il ricontatto telefonico</li>
        <li><strong>Indirizzo e-mail</strong> – per comunicazioni scritte</li>
        <li><strong>Messaggio libero</strong> – descrizione dell'esigenza tecnica</li>
      </ul>
      <p>Non vengono raccolti dati appartenenti alle categorie particolari di cui all'art. 9 GDPR (dati sensibili, giudiziari, ecc.).</p>

      <h3>3. Finalità e Base Giuridica del Trattamento</h3>
      <table class="privacy-table">
        <thead>
          <tr><th>Finalità</th><th>Base giuridica (art. 6 GDPR)</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>Rispondere alla richiesta di consulenza e ricontattare l'interessato</td>
            <td>Art. 6 par. 1 lett. <strong>b</strong> – esecuzione di misure precontrattuali adottate su richiesta dell'interessato</td>
          </tr>
          <tr>
            <td>Gestione delle comunicazioni e dell'archivio professionale</td>
            <td>Art. 6 par. 1 lett. <strong>c</strong> – adempimento di obblighi legali</td>
          </tr>
          <tr>
            <td>Invio di informazioni sui servizi dello Studio (solo con consenso esplicito)</td>
            <td>Art. 6 par. 1 lett. <strong>a</strong> – consenso dell'interessato</td>
          </tr>
        </tbody>
      </table>

      <h3>4. Modalità di Trattamento e Conservazione</h3>
      <p>I dati personali sono trattati con strumenti informatici e cartacei, nel rispetto delle misure di sicurezza adeguate ai sensi dell'art. 32 GDPR. Il Titolare adotta misure tecniche e organizzative idonee a garantire un livello di sicurezza adeguato al rischio.</p>
      <p><strong>Periodo di conservazione:</strong> i dati saranno conservati per il tempo strettamente necessario a evadere la richiesta e, in caso di instaurazione di un rapporto professionale, per tutta la durata del rapporto e per i successivi 10 anni ai fini degli obblighi di legge (D.Lgs. 139/2005, art. 2220 c.c.).</p>

      <h3>5. Destinatari dei Dati</h3>
      <p>I dati non vengono ceduti a terzi né diffusi. Possono essere comunicati esclusivamente a:</p>
      <ul>
        <li>Fornitori di servizi tecnici (es. hosting, piattaforma e-mail) nella qualità di <strong>Responsabili del Trattamento</strong> ex art. 28 GDPR, vincolati da appositi accordi contrattuali;</li>
        <li>Autorità pubbliche, ove richiesto dalla legge.</li>
      </ul>
      <p>I dati non sono trasferiti verso Paesi terzi al di fuori dello Spazio Economico Europeo (SEE) né verso organizzazioni internazionali, salvo diversa comunicazione.</p>

      <h3>6. Diritti dell'Interessato</h3>
      <p>Ai sensi degli artt. 15–22 GDPR, l'interessato ha il diritto di:</p>
      <ul>
        <li><strong>Accesso</strong> (art. 15) – ottenere conferma che sia in corso un trattamento e riceverne copia;</li>
        <li><strong>Rettifica</strong> (art. 16) – ottenere la correzione di dati inesatti o incompleti;</li>
        <li><strong>Cancellazione</strong> (art. 17) – «diritto all'oblio», ottenere la cancellazione dei dati ove ne ricorrano i presupposti;</li>
        <li><strong>Limitazione</strong> (art. 18) – richiedere la limitazione del trattamento;</li>
        <li><strong>Portabilità</strong> (art. 20) – ricevere i dati in formato strutturato e leggibile da dispositivo automatico;</li>
        <li><strong>Opposizione</strong> (art. 21) – opporsi al trattamento in qualsiasi momento;</li>
        <li><strong>Revoca del consenso</strong> (art. 7 par. 3) – senza pregiudicare la liceità del trattamento precedente alla revoca.</li>
      </ul>
      <p>Per esercitare i propri diritti l'interessato può contattare il Titolare all'indirizzo e-mail <a href="mailto:geom.carlo.musso@gmail.com">geom.carlo.musso@gmail.com</a> o PEC <a href="mailto:carlo.musso1@geopec.it">carlo.musso1@geopec.it</a>. Il Titolare risponderà entro 30 giorni dalla ricezione della richiesta (art. 12 GDPR).</p>

      <h3>7. Diritto di Reclamo</h3>
      <p>L'interessato ha il diritto di proporre reclamo all'autorità di controllo competente. In Italia tale autorità è il <strong>Garante per la protezione dei dati personali</strong>:</p>
      <p>
        Piazza Venezia 11 – 00187 Roma<br>
        Sito: <a href="https://www.garanteprivacy.it" target="_blank" rel="noopener">www.garanteprivacy.it</a><br>
        E-mail: <a href="mailto:garante@gpdp.it">garante@gpdp.it</a>
      </p>

      <h3>8. Natura del Conferimento dei Dati</h3>
      <p>Il conferimento dei dati contrassegnati come obbligatori (Nome, E-mail) è necessario per dare riscontro alla richiesta di consulenza. Il mancato conferimento comporta l'impossibilità di processare la richiesta. Gli altri dati (telefono, messaggio) sono facoltativi e il loro conferimento è rimesso alla libera scelta dell'interessato.</p>

      <h3>9. Processi Decisionali Automatizzati</h3>
      <p>I dati personali non sono soggetti a processi decisionali automatizzati né a profilazione ai sensi dell'art. 22 GDPR.</p>

      <h3>10. Aggiornamento dell'Informativa</h3>
      <p>Il Titolare si riserva di aggiornare la presente Informativa per adeguarla a modifiche normative o organizzative. La versione più recente è sempre disponibile su questa pagina. La data dell'ultimo aggiornamento è indicata di seguito.</p>
      <p style="font-size:0.72rem; color:var(--grey-dark); margin-top:1rem;">
        <em>Ultimo aggiornamento: maggio 2025 – Versione conforme al Reg. UE 2016/679 (GDPR) e al D.Lgs. 196/2003 come modificato dal D.Lgs. 101/2018.</em>
      </p>

    </div><!-- /body -->

    <div class="privacy-modal-footer">
      <button class="privacy-btn-close secondary" onclick="closePrivacyModal()">Chiudi</button>
      <button class="privacy-btn-close primary" onclick="acceptPrivacyAndClose()">Ho letto e acconsento</button>
    </div>

  </div>
</div>
<!-- ═══ /MODAL PRIVACY ════════════════════════════════════════════════════ -->

<script>
/* ══ ACCORDION CATEGORIE ══ */
function toggleCat(header) {
  header.closest('.service-cat').classList.toggle('open');
}

/* ══ ACCORDION ITEMS ══ */
function toggleItem(header) {
  const item = header.closest('.service-item');
  const wasOpen = item.classList.contains('open');
  item.parentElement.querySelectorAll('.service-item').forEach(s => s.classList.remove('open'));
  if (!wasOpen) item.classList.add('open');
}

/* ══ APRI CATEGORIA + ITEM DA LINK ══ */
function openItem(catId, itemId) {
  /* chiude il mega menu immediatamente al click */
  const mm = document.querySelector('.mega-menu');
  const mb = document.getElementById('megaBridge');
  if (mm) mm.classList.remove('open');
  if (mb) mb.classList.remove('open');

  const cat = document.getElementById(catId);
  if (cat) cat.classList.add('open');
  setTimeout(() => {
    const item = document.getElementById(itemId);
    if (item) {
      item.parentElement.querySelectorAll('.service-item').forEach(s => s.classList.remove('open'));
      item.classList.add('open');
      item.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }, 300);
}

/* ══ HASH URL ALL'ARRIVO ══ */
window.addEventListener('DOMContentLoaded', () => {
  if (window.location.hash) {
    const id = window.location.hash.substring(1);
    const item = document.getElementById(id);
    if (item && item.classList.contains('service-item')) {
      const cat = item.closest('.service-cat');
      if (cat) cat.classList.add('open');
      setTimeout(() => { item.classList.add('open'); item.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 400);
    }
  }
});

/* ══ MOBILE MENU ══ */
function toggleMobileMenu(btn) {
  btn.classList.toggle('open');
  document.getElementById('mobileMenu').classList.toggle('open');
}
function closeMobileMenu() {
  const btn = document.querySelector('.nav-hamburger');
  if (btn) btn.classList.remove('open');
  const m = document.getElementById('mobileMenu');
  if (m) m.classList.remove('open');
}

/* ══ MEGA MENU ══ */
(function() {
  const hasMega = document.querySelector('.has-mega');
  const megaMenu = document.querySelector('.mega-menu');
  const megaBridge = document.getElementById('megaBridge');
  if (!hasMega || !megaMenu) return;
  let t;
  function open() { clearTimeout(t); megaMenu.classList.add('open'); megaBridge.classList.add('open'); }
  function close() { t = setTimeout(() => { megaMenu.classList.remove('open'); megaBridge.classList.remove('open'); }, 130); }
  hasMega.addEventListener('mouseenter', open);
  hasMega.addEventListener('mouseleave', close);
  megaMenu.addEventListener('mouseenter', open);
  megaMenu.addEventListener('mouseleave', close);
  megaBridge.addEventListener('mouseenter', open);
  megaBridge.addEventListener('mouseleave', close);
})();

/* ══ ANIMAZIONI SCROLL (IntersectionObserver) ══ */
document.addEventListener('DOMContentLoaded', () => {
  const obs = new IntersectionObserver((entries) => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });
  }, { threshold: 0.07 });
  document.querySelectorAll('.fade-in-up').forEach(el => obs.observe(el));
});

/* CF7 gestisce l'invio del form */

/* ══ PAGE LOADER ══ */
window.addEventListener('load', () => {
  const loader = document.getElementById('page-loader');
  if (loader) {
    setTimeout(() => loader.classList.add('hidden'), 180);
  }
});

/* ══ SCROLL: progress bar + back-to-top + nav attivo ══ */
(function () {
  const root  = document.documentElement;
  const btt   = document.getElementById('back-to-top');
  const navAs = document.querySelectorAll('.nav-links > li > a');
  const ids   = ['panoramica','servizi','clienti','attestazioni','contatti'];

  if (btt) btt.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

  window.addEventListener('scroll', () => {
    const scrolled = root.scrollTop || document.body.scrollTop;
    const total    = root.scrollHeight - root.clientHeight;
    root.style.setProperty('--scroll-pct', (total > 0 ? (scrolled / total) * 100 : 0) + '%');

    if (btt) btt.classList.toggle('visible', scrolled > 450);

    const pos = scrolled + 140;
    let active = '';
    ids.forEach(id => {
      const s = document.getElementById(id);
      if (s && s.offsetTop <= pos) active = id;
    });
    navAs.forEach(a => {
      const href = (a.getAttribute('href') || '').replace('#', '');
      a.classList.toggle('nav-active', href === active && active !== '');
    });
  }, { passive: true });
})();

/* ══ COUNTER ANIMATO ══ */
(function () {
  const obs = new IntersectionObserver(entries => {
    entries.forEach(e => {
      if (!e.isIntersecting) return;
      const el     = e.target;
      const target = parseInt(el.dataset.count, 10);
      const prefix = el.dataset.prefix || '';
      const suffix = el.dataset.suffix || '';
      let start = null;
      const dur = 1400;
      function step(ts) {
        if (!start) start = ts;
        const t    = Math.min((ts - start) / dur, 1);
        const ease = 1 - Math.pow(1 - t, 3);
        el.textContent = prefix + Math.floor(ease * target).toLocaleString('it-IT') + suffix;
        if (t < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
      obs.unobserve(el);
    });
  }, { threshold: 0.6 });
  document.querySelectorAll('[data-count]').forEach(el => obs.observe(el));
})();

/* ══ PARTICELLE FULL PAGE — profondità a 3 strati + scintillio ══ */
(function () {
  const canvas = document.getElementById('page-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  /* con "riduci animazioni" attivo mostriamo le stelle ferme, non le nascondiamo */
  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const LINK = 180;

  /* strati dal più lontano (piccolo, fioco, lento) al più vicino (grande, luminoso, veloce) */
  const LAYERS = [
    { count: 260, rMin: 0.4, rMax: 0.9, speed: 0.07, aMin: 0.10, aMax: 0.24, link: false, glow: 0 },
    { count: 160, rMin: 0.8, rMax: 1.7, speed: 0.15, aMin: 0.18, aMax: 0.40, link: false, glow: 0 },
    { count: 80,  rMin: 1.5, rMax: 3.0, speed: 0.30, aMin: 0.34, aMax: 0.68, link: true,  glow: 10 }
  ];

  let W, H, pts, near;

  function init() {
    W = canvas.width  = window.innerWidth;
    H = canvas.height = window.innerHeight;
    pts = [];
    LAYERS.forEach((layer, li) => {
      for (let i = 0; i < layer.count; i++) {
        pts.push({
          x: Math.random() * W,
          y: Math.random() * H,
          vx: reduced ? 0 : (Math.random() - .5) * layer.speed,
          vy: reduced ? 0 : (Math.random() - .5) * layer.speed,
          r:  Math.random() * (layer.rMax - layer.rMin) + layer.rMin,
          a:  Math.random() * (layer.aMax - layer.aMin) + layer.aMin,
          phase:   Math.random() * Math.PI * 2,
          twSpeed: 0.0006 + Math.random() * 0.0014,
          layer: li
        });
      }
    });
    near = pts.filter(p => LAYERS[p.layer].link);
  }
  init();
  window.addEventListener('resize', init, { passive: true });

  function draw(ts) {
    ctx.clearRect(0, 0, W, H);

    pts.forEach(p => {
      const layer = LAYERS[p.layer];
      p.x = (p.x + p.vx + W) % W;
      p.y = (p.y + p.vy + H) % H;
      const twinkle = reduced ? 1 : 0.5 + 0.5 * Math.sin(ts * p.twSpeed + p.phase);
      const alpha   = p.a * (0.65 + 0.35 * twinkle);

      ctx.beginPath();
      if (layer.glow) {
        ctx.shadowBlur  = layer.glow;
        ctx.shadowColor = `rgba(154,218,255,${alpha})`;
      } else {
        ctx.shadowBlur = 0;
      }
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(205,233,255,${alpha})`;
      ctx.fill();
    });
    ctx.shadowBlur = 0;

    /* costellazioni solo tra le stelle in primo piano */
    for (let i = 0; i < near.length - 1; i++) {
      for (let j = i + 1; j < near.length; j++) {
        const dx = near[i].x - near[j].x;
        const dy = near[i].y - near[j].y;
        const d  = Math.hypot(dx, dy);
        if (d < LINK) {
          ctx.beginPath();
          ctx.strokeStyle = `rgba(154,218,255,${.32 * (1 - d / LINK)})`;
          ctx.lineWidth = .8;
          ctx.moveTo(near[i].x, near[i].y);
          ctx.lineTo(near[j].x, near[j].y);
          ctx.stroke();
        }
      }
    }

    if (!reduced) requestAnimationFrame(draw);
  }
  if (reduced) draw(0); else requestAnimationFrame(draw);
})();

/* ══ SPOTLIGHT CURSORE (hero-card / pan-card) ══ */
(function () {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  if (window.matchMedia('(hover: none)').matches) return;
  document.querySelectorAll('.hero-card, .pan-card').forEach(card => {
    card.addEventListener('mousemove', e => {
      const r = card.getBoundingClientRect();
      card.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
      card.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
    });
  });
})();

/* ══ FORM CONSULENZA ══ */
function handleFormSubmit(e) {
  e.preventDefault();
  const form = e.target;
  const nome    = form.nome.value.trim();
  const tel     = form.telefono.value.trim();
  const email   = form.email.value.trim();
  const msg     = form.messaggio.value.trim();
  const privacy = form.privacy.checked;
  const fb      = document.getElementById('form-feedback');

  if (!nome || !tel || !email) {
    fb.style.display = 'block';
    fb.style.borderColor = 'rgba(255,100,100,0.5)';
    fb.style.background  = 'rgba(255,80,80,0.06)';
    fb.style.color       = '#f08080';
    fb.textContent = 'Compila tutti i campi obbligatori.';
    return;
  }
  if (!privacy) {
    fb.style.display = 'block';
    fb.style.borderColor = 'rgba(255,100,100,0.5)';
    fb.style.background  = 'rgba(255,80,80,0.06)';
    fb.style.color       = '#f08080';
    fb.textContent = 'Devi accettare l\'informativa sulla privacy per procedere.';
    return;
  }

  const subject = encodeURIComponent('Richiesta consulenza – ' + nome);
  const body    = encodeURIComponent(
    'Nome: ' + nome + '\nTelefono: ' + tel + '\nEmail: ' + email +
    (msg ? '\n\nMessaggio:\n' + msg : '')
  );
  window.location.href = 'mailto:geom.carlo.musso@gmail.com?subject=' + subject + '&body=' + body;

  fb.style.display     = 'block';
  fb.style.borderColor = 'var(--azure)';
  fb.style.background  = 'rgba(154,218,255,0.06)';
  fb.style.color       = 'var(--grey-light)';
  fb.textContent = 'Grazie! Il tuo client email si aprirà per completare l\'invio.';
  form.reset();
}

/* ══ TYPEWRITER HERO TAG ══ */
(function () {
  const tag = document.querySelector('.hero-tag');
  if (!tag) return;
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  const phrases = [
    'Studio Tecnico · Genova',
    'Pratiche Edilizie & Catastali',
    'Progettazione & Topografia',
    'Agevolazioni Fiscali'
  ];
  const span = document.createElement('span');
  span.textContent = phrases[0];
  tag.textContent = '';
  tag.appendChild(span);

  let idx = 0, ci = phrases[0].length, del = false;

  function tick() {
    const p = phrases[idx];
    if (!del) {
      span.textContent = p.slice(0, ++ci);
      if (ci === p.length) { del = true; setTimeout(tick, 2600); return; }
    } else {
      span.textContent = p.slice(0, --ci);
      if (ci === 0) { del = false; idx = (idx + 1) % phrases.length; setTimeout(tick, 420); return; }
    }
    setTimeout(tick, del ? 36 : 70);
  }
  setTimeout(tick, 2200);
})();

  // ── PRIVACY MODAL ───────────────────────────────────────────────────────
  function openPrivacyModal(e) {
    if (e) e.preventDefault();
    document.getElementById('privacyModal').classList.add('open');
    document.body.style.overflow = 'hidden';
  }
  function closePrivacyModal() {
    document.getElementById('privacyModal').classList.remove('open');
    document.body.style.overflow = '';
  }
  function acceptPrivacyAndClose() {
    const cb = document.getElementById('privacy');
    if (cb) cb.checked = true;
    closePrivacyModal();
  }
  // Chiusura su click overlay
  document.getElementById('privacyModal').addEventListener('click', function(e) {
    if (e.target === this) closePrivacyModal();
  });
  // Chiusura con Escape
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePrivacyModal();
  });

</script>
</body>
</html>
