@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(/assets/fonts/bricolage-a24454.woff2) format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(/assets/fonts/hanken-it.woff2) format('woff2');
}

:root{
  --bg:#FBFCFE;
  --surface:#FFFFFF;
  --surface-2:#F1F5FA;
  --navy:#0D1B2A;
  --text-body:#33424F;
  --text-muted:#5E7186;
  --border:#DCE5EF;
  --border-strong:#C3D2E0;
  --orange:#E85D04;
  --orange-bright:#FF7C26;
  --orange-soft:#FFE9DA;
  --blue:#0077B6;
  --blue-soft:#E1F1F9;
  --green:#16A34A;
  --green-bright:#22C55E;
  --green-glow:rgba(22,163,74,.28);
  --grad-orange:linear-gradient(135deg,#E85D04,#FF7C26);
  --grad-green:linear-gradient(135deg,#22C55E 0%,#16A34A 100%);
  --grad-mesh:
    radial-gradient(60% 70% at 12% 0%, var(--blue-soft) 0%, transparent 55%),
    radial-gradient(55% 65% at 100% 20%, var(--orange-soft) 0%, transparent 55%);
  --shadow-sm:0 1px 2px rgba(13,27,42,.06);
  --shadow-md:0 6px 24px rgba(13,27,42,.08);
  --shadow-lg:0 18px 48px rgba(13,27,42,.12);
  --font-heading:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.5;
  overflow-x:hidden;
}
.hero{
  position:relative;
  width:100%;
  background:var(--grad-mesh);
  overflow:hidden;
}
.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:3rem 1.25rem 3.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.logo{
  width:150px;
  height:auto;
  margin-bottom:1.75rem;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--grad-orange);
  color:#fff;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.5rem 1.1rem;
  border-radius:999px;
  margin-bottom:1.5rem;
  box-shadow:0 4px 14px rgba(232,93,4,.25);
}
.badge__dot{
  width:8px;height:8px;border-radius:50%;
  background:#fff;
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.7)}
}
h1{
  font-family:var(--font-heading);
  font-size:clamp(1.9rem,6vw,3rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--navy);
  margin-bottom:1rem;
}
h1 span{color:var(--orange)}
.lead{
  font-size:clamp(1rem,2.5vw,1.15rem);
  color:var(--text-muted);
  max-width:560px;
  margin-bottom:2.25rem;
}
.lead strong{color:var(--navy);font-weight:700}
.cta{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:var(--grad-green);
  color:#fff;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  padding:1rem 2rem;
  border-radius:14px;
  box-shadow:0 6px 20px var(--green-glow);
  transition:transform .2s ease, box-shadow .2s ease;
  margin-bottom:2.75rem;
}
.cta:hover,.cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 28px var(--green-glow);
}
.cta svg{flex-shrink:0}
.cta--ghost{
  background:var(--surface);
  color:var(--blue);
  border:1.5px solid var(--border-strong);
  box-shadow:none;
}
.cta--ghost:hover,.cta--ghost:focus-visible{
  color:var(--blue);
  border-color:var(--blue);
  box-shadow:var(--shadow-md);
}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}

.card{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  border-radius:20px;
  padding:2rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:1.15rem;
}
.contact-row{
  display:flex;
  align-items:center;
  gap:.9rem;
  text-align:left;
}
.contact-row a{color:var(--navy);text-decoration:none}
.contact-row a:hover{color:var(--orange)}
.contact-icon{
  flex-shrink:0;
  width:42px;height:42px;
  border-radius:12px;
  background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;
}
.contact-icon svg{width:20px;height:20px;color:var(--blue)}
.contact-text{font-size:.98rem;line-height:1.4;color:var(--navy)}
.contact-text small{display:block;color:var(--text-muted);font-size:.78rem;margin-top:.1rem;font-weight:400}

.socials{
  display:flex;
  justify-content:center;
  gap:.85rem;
  margin-top:2.25rem;
}
.socials a{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--navy);
  transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.socials a svg{width:22px;height:22px}
.socials a:hover,.socials a:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-md);color:#fff}
.socials a.fb:hover{background:#1877f2;border-color:#1877f2}
.socials a.ig:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:transparent}
.socials a.wa:hover{background:#25d366;border-color:#25d366}

footer{
  position:relative;z-index:1;
  width:100%;
  text-align:center;
  padding:1.5rem 1rem 2rem;
  font-size:.82rem;
  color:var(--text-muted);
  border-top:1px solid var(--border);
}
footer strong{color:var(--navy)}

/* pagine di errore */
.error-code{
  font-family:var(--font-heading);
  font-size:clamp(4.5rem,18vw,7rem);
  font-weight:800;
  line-height:1;
  color:var(--orange);
  margin-bottom:.75rem;
}

@media (min-width:560px){
  .card{padding:2.25rem 2.5rem}
}