/* Layout della landing: container 1140px, sezioni da 96px, griglie 8 / 4 / 3
   e le due asimmetriche 0.8fr–1fr di metodo e contatti (readme del DS). */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.section { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.section--tall { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.section__grid { margin-top: var(--s-6); display: grid; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s-5); top: var(--s-3); z-index: 60; background: var(--surface-card); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); }

/* --- Top bar ------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(251, 252, 253, .82);
  border-bottom: var(--border-1);
}
.topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.wordmark {
  font: var(--w-semibold) var(--size-body) / 1 var(--font-display);
  letter-spacing: var(--ls-head);
  color: var(--text-strong);
  text-decoration: none;
}
.topbar__nav { display: flex; gap: var(--s-5); margin-left: auto; }
.topbar__nav a {
  font: var(--w-medium) var(--size-small) / 1 var(--font-body);
  color: var(--text-body);
  text-decoration: none;
}
.topbar__nav a:hover { color: var(--text-link-hover); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: var(--s-8) 0 var(--s-9); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: var(--s-5); align-items: flex-start; }
/* Il token display-xl (4.25rem) è tarato su una riga piena: nella colonna da
   ~522px dell'hero manderebbe il claim su tre righe e sfonderebbe il viewport
   sotto i 500px. Scala fluida, entro i limiti della scala tipografica. */
.hero__title {
  font: var(--w-semibold) clamp(2.375rem, 4.6vw, 3.75rem) / var(--lh-tight) var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin: 0;
}
.hero__lead {
  margin: 0;
  font: var(--w-regular) var(--size-lead) / var(--lh-body) var(--font-body);
  color: var(--text-body);
  max-width: 48ch;
}
.hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero__board { display: flex; flex-direction: column; gap: var(--s-3); }
.hero__hint { margin: 0; font: var(--w-regular) var(--size-micro) / 1.4 var(--font-body); color: var(--text-muted); }

/* --- Aree di intervento -------------------------------------------------- */
.aree-grid { grid-template-columns: repeat(8, 1fr); gap: var(--s-2); }

/* --- Il problema --------------------------------------------------------- */
.problema { border-top: var(--border-1); border-bottom: var(--border-1); }
.pain-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.pain { display: flex; flex-direction: column; gap: var(--s-3); }
.pain .icon { color: var(--acciaio-600); }
.pain__title { font: var(--w-semibold) var(--size-h3) / 1.25 var(--font-display); }
.pain__text { margin: 0; font: var(--w-regular) var(--size-small) / var(--lh-body) var(--font-body); color: var(--text-body); }

/* --- Il metodo ----------------------------------------------------------- */
.metodo {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: var(--s-8);
}

/* --- Servizi ------------------------------------------------------------- */
.servizi-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }

/* --- Chi sono ------------------------------------------------------------ */
.chi {
  background: var(--surface-ink);
  color: var(--text-invert);
  padding: var(--s-9) 0;
  position: relative;
  overflow: hidden;
}
.chi__wash { position: absolute; inset: 0; background-image: var(--wash-1), var(--wash-2); opacity: .5; pointer-events: none; }
.chi__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .6fr);
  gap: var(--s-8);
  align-items: center;
}
.chi__copy { display: flex; flex-direction: column; gap: var(--s-4); }
.chi__lead {
  margin: 0;
  font: var(--w-regular) var(--size-lead) / var(--lh-body) var(--font-body);
  color: var(--celeste-200);
  max-width: 62ch;
}
.chi__text {
  margin: 0;
  font: var(--w-regular) var(--size-body) / var(--lh-body) var(--font-body);
  color: var(--celeste-300);
  max-width: 62ch;
}
.chi__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.chi__notes { display: flex; flex-direction: column; gap: var(--s-5); align-items: center; padding-top: var(--s-4); }

/* --- Contatti ------------------------------------------------------------ */
.contatti {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.contatti__copy { display: flex; flex-direction: column; gap: var(--s-4); }
.contatti__promesse {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font: var(--w-regular) var(--size-small) / var(--lh-body) var(--font-body);
  color: var(--text-body);
  margin: 0;
  padding: 0;
  list-style: none;
}
.contatti__promesse li::before { content: "· "; }
.contatti__email { font: var(--w-medium) var(--size-body) var(--font-mono); }
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form__alert {
  font: var(--w-medium) var(--size-small) / 1.45 var(--font-body);
  color: var(--errore);
  background: rgba(168, 68, 60, .07);
  border: 1px solid rgba(168, 68, 60, .25);
  border-radius: var(--r-2);
  padding: 11px 13px;
}
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sent { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.sent__title { font: var(--w-semibold) var(--size-h3) / 1.2 var(--font-display); }
.sent__text { margin: 0; font: var(--w-regular) var(--size-small) / var(--lh-body) var(--font-body); color: var(--text-body); }

/* --- Footer -------------------------------------------------------------- */
.footer { border-top: var(--border-1); background: var(--surface-sunken); }
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-5);
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  font: var(--w-regular) var(--size-micro) / 1.5 var(--font-body);
  color: var(--text-muted);
}
.footer__brand { font: var(--w-semibold) var(--size-small) / 1 var(--font-display); color: var(--text-strong); }

/* --- Adattamento agli schermi stretti ------------------------------------ */
@media (max-width: 1000px) {
  .aree-grid { grid-template-columns: repeat(4, 1fr); }
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .servizi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --size-h2: 1.625rem; --size-h3: 1.25rem; }
  .hero__grid,
  .metodo,
  .contatti,
  .chi__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .hero__board { order: 2; }
  .chi__notes { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
  .topbar__nav { display: none; }
  .wordmark { margin-right: auto; }
}

@media (max-width: 600px) {
  .section { padding-top: var(--s-7); padding-bottom: var(--s-7); }
  .section--tall { padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .aree-grid { grid-template-columns: repeat(2, 1fr); }
  .pain-grid,
  .servizi-grid { grid-template-columns: minmax(0, 1fr); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .chi { padding: var(--s-8) 0; }
}