:root{
      --bg:#ffffff;
      --fg:#0b0b0b;
      --muted:#6b7280;
      --brand:#800000;
      --ring: rgba(0,0,0,.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:var(--bg); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
      display:flex; flex-direction:column; min-height:100svh;
    }

    .wrap{flex:1; display:grid; place-items:center; padding:10vh 5vw 8vh}

    .card{
      width:min(900px, 92vw);
      background: #fff;
      border-radius: 14px;
      padding:min(5vw,56px);
      box-shadow: 0 8px 30px -12px var(--ring), 0 2px 10px -8px var(--ring);
      border: 1px solid rgba(0,0,0,.04);
      transform: translateY(6px);
      opacity: 0;
      animation: float-in .9s cubic-bezier(.22,1,.36,1) .1s forwards;
    }

    @keyframes float-in{to{opacity:1; transform:translateY(0)}}

   .logo-box{display:grid; place-items:center; margin-bottom:32px}
.logo-wrapper{
  display: flex;
  align-items: center;
  gap: 4px; /* più vicino */
}
.logo-text{
  font-size: 2rem;
  
  color: #800000; /* colore del brand */
  letter-spacing: -1px;
  margin-left: -20px;

}
    .logo{
      max-width: 180px; height: auto; display:block;
      filter: drop-shadow(0 8px 24px rgba(0,0,0,.08));
      transition: transform .6s cubic-bezier(.22,1,.36,1);
    }
    .logo:hover{ transform: scale(1.04) rotate(-1.5deg); }

   blockquote {
  margin: 0 auto;
  max-width: 60ch;
  font-size: clamp(18px, 2.8vw, 16px);
  line-height: 1.6;
  color: #5a403f; /* tono caldo ed elegante */
  font-style: italic;
  position: relative;
  padding-left: 3rem; /* aumenta lo spazio a sinistra */
}
blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem; /* leggermente più grande */
  height: 1.5rem;
  background: url('img/sfondo-blockquote.gif') no-repeat center center;
  background-size: contain;
}

/* Animazione di digitazione: cursore e parole */
.typing .caret{ display:inline-block; width:.6ch; border-right:2px solid currentColor; margin-left:.1ch; animation: blink 1s steps(1, end) infinite; vertical-align:-0.1em; }
@keyframes blink { 50% { border-color: transparent; } }
.word{ opacity:0; transform: translateY(4px); animation: word-in .25s ease forwards; }
@keyframes word-in { to { opacity:1; transform:none; } }

    .sub{
      margin-top:12px; color:var(--muted);
      font-size: clamp(13px, 2vw, 15px);
      font-style: italic;
    }

    .info{
      margin-top:36px; font-size: 14px;
      color: #5a403f; /* tono caldo ed elegante */
	  text-align: center;
    }

    footer{
      background:var(--brand); color:#fff; margin-top:auto;
    }
    .foot{
      width:min(1100px, 94vw); margin:0 auto; padding:22px 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
    }
    .brandline{letter-spacing:.3px}

    .tiny{opacity:1; font-size:14px}
	
	.company a {color:#fff; text-decoration:none;}
    .company a:hover {text-decoration: underline;}

	.contacts a {color:#fff; text-decoration:underline;}
    .contacts a:hover {text-decoration: underline;}

    .pulse-ring{
      position:absolute; inset:0; pointer-events:none; border-radius:14px; transform:translateZ(0);
      --size: 140px;
      mask: radial-gradient(circle at var(--x,50%) var(--y,50%), #000 0%, #0000 var(--size));
      background: radial-gradient(600px 600px at var(--x,50%) var(--y,50%), rgba(0,0,0,.04), transparent 60%);
      transition: --x .12s ease, --y .12s ease;
    }

    @media (max-width:520px){
      .logo{ max-width:120px; height:auto; }
      .card{border-radius:22px}
    }