:root{
  --bg:#0b0b0c; --bg-elev:#121214; --text:#eaeaea; --muted:#b5b5b5;
  --accent:#ffffff; --radius:14px;
  --ring:0 0 0 .15rem color-mix(in oklab, var(--accent) 40%, transparent);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);background:var(--bg);
  font:400 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
img{max-width:100%;display:block}
img:not([alt]){role:presentation} /* SEO: immagini senza alt non considerate contenuto */
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:10px
}
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;z-index:2000;
  background:var(--bg-elev);padding:.5rem .75rem;border-radius:var(--radius);
  color:var(--accent);font-weight:600;box-shadow:0 0 12px rgba(0,0,0,.5);
}

/* ===== Loader overlay ===== */
.loader-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg, #0b0b0c);
  z-index: 2000;
  opacity: 1;
  transition: opacity .35s ease, visibility .35s ease;
  visibility: visible;
}
.loader-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
body.is-loading { overflow: hidden; }

/* ---- Loader “bars” ---- */
.loader { display: flex; align-items: center; gap: 5px; }
.bar {
  display: inline-block;
  width: 3px; height: 20px;
  background-color: rgba(255,255,255,.5);
  border-radius: 10px;
  animation: scale-up4 1s linear infinite;
}
.bar:nth-child(2){height: 35px; animation-delay:.25s}
.bar:nth-child(3){animation-delay:.5s}
@keyframes scale-up4{
  20% {background-color:#fff;transform:scaleY(1.5);}
  40% {transform:scaleY(1);}
}
@media (prefers-reduced-motion: reduce) { .bar{animation:none} }

/* HEADER */
.site-header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  padding: 0.5rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 1000;
}

/* HAMBURGER */
.hamburger {
  cursor: pointer;
  position: fixed;
  top: 1rem; left: 1rem;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  z-index: 1002;
}
.hamburger input { display:none }
.hamburger svg {
  height:2rem; width:2rem;
  transition: transform 600ms cubic-bezier(0.4,0,0.2,1);
}
.line {
  fill:none; stroke:white; stroke-linecap:round; stroke-linejoin:round;
  stroke-width:3;
  transition: stroke-dasharray 600ms, stroke-dashoffset 600ms;
}
.line-top-bottom{ stroke-dasharray:12 63 }
.hamburger input:checked+svg { transform: rotate(-45deg) }
.hamburger input:checked+svg .line-top-bottom {
  stroke-dasharray:20 300; stroke-dashoffset:-32.42;
}

/* SOCIAL TOP */
.social-top {
  position: fixed; top:.75rem; right:1rem;
  display:flex; gap:10px; flex-direction:row;
  z-index:1002;
}
.social-top a {
  width:40px; height:40px;
  display:flex; justify-content:center; align-items:center;
  border-radius:50%;
  transform-style:preserve-3d;
  transition:all .5s ease-in-out;
  cursor:pointer; color:white;
}
.social-top a:hover {
  background-color:white;
  transform: perspective(180px) rotateX(60deg) translateY(2px);
  box-shadow:0px 10px 10px rgba(1,49,182,.4);
}
.social-top svg { width:18px; height:18px; fill:white }
.social-top a:hover svg {
  transform:translate3d(0,0,15px) perspective(180px) rotateX(-35deg) translateY(2px);
}
.social-top a.instagram { background:#D0D0D0 }
.social-top a.facebook { background:#D0D0D0 }

/* === MENU CARD (sidebar) === */
.menu-card{
  position: fixed;
  top: 64px; left:0;
  height: calc(100vh - 64px); width:220px;
  transform: translateX(-260px);
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  pointer-events: none;
  background: transparent !important;
  z-index: 1001;
}
.menu-card.is-open{ transform:translateX(0); pointer-events:auto }
.menu-card .card{
  background: rgba(36,40,50,0.95);
  border-radius:10px; padding:10px;
}
.menu-card .list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.menu-card .list .element a{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:6px;
  font-weight:600; color:#7e8590;
  transition:all .3s;
}
.menu-card .list .element a:hover{
  background: var(--color,#5353ff); color:#fff;
}

/* HERO */
.hero{position:relative;min-height:100dvh;display:grid;place-items:center;text-align:center;overflow:hidden}
.hero-canvas{position:absolute;inset:0;z-index:0;filter:saturate(120%);opacity:.95;pointer-events:none}
.hero-inner{position:relative;z-index:1;padding:5rem 1rem 3rem}
.logo{margin-inline:auto;width:min(60vw,520px);height:auto;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.45))}
.headline{font-size:clamp(24px,6vw,48px);margin:.9rem 0 .35rem;letter-spacing:.4px}
.subhead{color:var(--muted);margin:0 0 1.25rem}
.cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* Pulsanti CTA stile Uiverse */
.getintouch-btn,
.explore-btn {
  display: inline-block;
  padding: 17px 40px;
  border-radius: 50px;
  cursor: pointer;
  border: 0;
  background-color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  color: #252525;
  transition: all 0.5s ease;
  text-decoration: none;
}
.getintouch-btn:hover,
.explore-btn:hover {
  letter-spacing: 3px;
  background-color: hsl(261deg 80% 48%);
  color: #fff;
  box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
}
.getintouch-btn:active,
.explore-btn:active {
  letter-spacing: 3px;
  background-color: hsl(261deg 80% 48%);
  color: #fff;
  box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}

/* Logo pulsazione */
.logo.pulsate{display:block;animation:gv-pulse 3.2s ease-in-out infinite both;transform-origin:center}
@keyframes gv-pulse{
  0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  50%{transform:scale(1.06);filter:drop-shadow(0 0 12px rgba(255,255,255,.35))}
  100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
}
@media (prefers-reduced-motion: reduce){.logo.pulsate{animation:none}}

/* Servizi cards + modal + reveal rimangono invariati... (già ottimi) */