:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#000000;
  --brand:#111;
  --accent:#222;
  --surface:#f6f6f6;
  --radius:16px;
  --shadow:0 6px 16px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--fg);
  background:var(--bg);
  text-rendering:optimizeLegibility;
}

.container{width:min(1120px, 92%); margin-inline:auto}
.narrow{width:min(820px, 92%); margin-inline:auto}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; padding:.5rem 1rem; background:#000; color:#fff; display:inline-block;
}

/* ===== HEADER GLASS + NAV DESKTOP ===== */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem}
.brand-mark{font-size:1rem}
.brand-name{font-weight:700; text-decoration:none; color:var(--brand); text-shadow: 0 1px 0 rgba(255,255,255,.6)}

.site-nav ul{display:flex; gap:.5rem .75rem; list-style:none; margin:0; padding:0; align-items:center}
.site-nav a{
  position:relative; display:inline-block; padding:.55rem .75rem; text-decoration:none; color:var(--fg);
  border-radius:12px; transition: transform .15s ease, box-shadow .15s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:8px; height:2px;
  background: linear-gradient(90deg, rgba(0,0,0,.0), rgba(0,0,0,.65), rgba(0,0,0,.0));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.site-nav a:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08) }
.site-nav a:hover::after{ transform:scaleX(1) }
.site-nav a.active{
  box-shadow: 0 8px 26px rgba(0,0,0,.10);
}
.site-nav a.active::after{ transform:scaleX(1) }

.nav-toggle{ /* mobile di default; nascosta su desktop via media query */
  display:inline-flex; align-items:center; justify-content:center;
  background:#111; color:#fff; border:0; border-radius:12px; padding:0;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease;
  width:44px; height:44px; position:relative; overflow:hidden;
}
.nav-toggle:active{ transform: scale(.98) }

/* ===== Icona hamburger + morph ===== */
.burger{display:inline-block; width:22px; height:16px; position:relative}
.burger .bar{
  position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px;
  transform-origin: center; transition: transform .22s ease, opacity .18s ease, top .22s ease, background .22s ease;
}
.burger .bar:nth-child(1){ top:0 }
.burger .bar:nth-child(2){ top:7px }
.burger .bar:nth-child(3){ top:14px }
.nav-toggle.is-open .bar:nth-child(1){ top:7px; transform: rotate(45deg) }
.nav-toggle.is-open .bar:nth-child(2){ opacity:0; transform: translateX(-4px) }
.nav-toggle.is-open .bar:nth-child(3){ top:7px; transform: rotate(-45deg) }

/* ===== MENU LATERALE (DRAWER) ===== */
.drawer{
  position: fixed;
  inset: 0 auto 0 0; width: min(330px, 86vw);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-right: 1px solid rgba(0,0,0,.06);
  box-shadow: 18px 0 40px rgba(0,0,0,.15);
  transform: translateX(-104%);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
  z-index: 80; display:flex; flex-direction:column; padding: .85rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.drawer.open{ transform: translateX(0) }
.drawer-nav ul{
  list-style:none; margin: .5rem 0 0; padding:0; display:grid; gap:.35rem;
}
.drawer-nav a{
  display:block; padding:.85rem .9rem; text-decoration:none; color:var(--fg);
  border-radius:12px; background: linear-gradient(180deg,#fff, #f9f9f9);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.drawer-nav a:hover{
  transform: translateX(2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.drawer-nav a.active{
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.drawer-close{
  align-self:flex-end; background:none; border:none; font-size:1.8rem; line-height:1;
  padding:.25rem .5rem; border-radius:10px; cursor:pointer;
}
.drawer-close:hover{ background: var(--surface) }

/* Overlay vellutato */
.drawer-overlay{
  position: fixed; inset:0; background: radial-gradient(80% 80% at 20% 20%, rgba(0,0,0,.30), rgba(0,0,0,.45));
  opacity:0; pointer-events:none; transition:opacity .32s ease; z-index:70;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto }

/* ===== SECTIONS / CONTENT ===== */
.section{padding:clamp(2rem, 4vw + 1rem, 4.5rem) 0}
.hero-title{font-size:clamp(1.6rem, 1.2rem + 2.5vw, 2.6rem); line-height:1.2; margin:0 0 1rem}
.lead{font-size:1.125rem}
.quote{
  border-left:4px solid #ddd; margin:1.5rem 0; padding:.75rem 1rem; color:var(--muted);
  font-style:italic; background:var(--surface); border-radius:0 var(--radius) var(--radius) 0;
  text-align: right;
}
.bullet{padding-left:1.1rem}
.cards{list-style:none; padding:0; margin:1.25rem 0; display:grid; grid-template-columns:repeat(1,1fr); gap:1rem}
.card{
  background:var(--surface); padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.10)}
.grid.two{display:grid; grid-template-columns:1fr; gap:1.25rem}

/* Contacts */
.contacts{display:grid; grid-template-columns:max-content 1fr; gap:.25rem .75rem}
.contacts dt{font-weight:600}
.contacts dd{margin:0}

/* Footer */
.site-footer{border-top:1px solid #eee; padding:1.2rem 0; background:#fafafa; color:var(--muted);}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(12px); will-change:opacity,transform}
.reveal.is-visible{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}

/* Ripple (leggerissimo) sul pulsante mobile */
.nav-toggle .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.45);
  pointer-events: none;
  width: 100px;
  height: 100px;
  opacity: 0.7;
  animation: ripple-animation 0.6s ease-out;
}
@keyframes ripple-animation { to { transform: scale(2.6); opacity: 0; } }

/* ===== RESPONSIVE SWITCH ===== */
/* Desktop: nav visibile, pulsante drawer nascosto */
@media (min-width: 901px){
  .nav-toggle{ display:none }
  .site-nav{ display:block }
  .nav-toggle .bar{ background:#111 }
}

/* Mobile/Tablet: nav superiore nascosto, bottone drawer visibile */
@media (max-width: 900px){
  .site-nav{ display:none !important }
  .cards{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .site-nav a::after, .card, .reveal.is-visible,
  .drawer, .drawer-overlay, .nav-toggle, .burger .bar,
  .nav-toggle .ripple { transition:none !important; animation:none !important }
}