/* landing.css — vetrina pubblica rapportino.ch (servita da Caddy, non dall'app).
   I valori dei token sono COPIATI da static/design.css per mantenere un'identità
   sola tra vetrina e prodotto: se lì cambia un valore di brand, va allineato qui.
   Nessuna dipendenza esterna (niente CDN/font remoti — policy no-CDN). */

:root {
  /* Palette (da design.css) */
  --color-primary: #1F4E79;
  --color-primary-dark: #163A5C;
  --color-primary-soft: #e8eef5;
  --color-on-primary: #ffffff;
  --color-accent: #E8A020;
  --color-accent-soft: #fdf1d8;
  --color-accent-text: #8a6d1a;
  --color-success: #1a7340;
  --color-success-bg: #e8f5ee;
  --color-danger: #c0392b;
  --color-danger-bg: #fef2f2;
  --color-danger-text: #991b1b;
  --color-bg: #f0f4f8;
  --color-surface: #ffffff;
  --color-surface-2: #f5f7fa;
  --color-text: #1a1a1a;
  --color-text-soft: #555f6b;
  --color-text-muted: #8a94a0;
  --color-border: #d9e0e8;
  /* Navy del logo (asset brand, vedi static/brand/README.md) */
  --color-brand-navy: #1B2D46;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: .8rem; --fs-sm: .9rem; --fs-base: 1rem; --fs-lg: 1.2rem; --fs-xl: 1.5rem; --fs-2xl: 2rem;
  --fw-normal: 400; --fw-medium: 600; --fw-bold: 700;
  --lh: 1.5;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(26, 46, 68, .08);
  --shadow-md: 0 4px 12px rgba(26, 46, 68, .10);
  --container-max: 1100px;
  --tap-min: 44px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--color-text);
  background: var(--color-bg);
  /* Guardrail overflow: un valore lunghissimo va a capo, mai fuori dal bordo */
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; height: auto; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand img { height: 40px; width: auto; display: block; }

/* ── Bottoni (stessi pattern di design.css) ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-2); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: var(--space-8) 0 var(--space-7); text-align: center; }
.hero h1 {
  margin: 0 auto var(--space-4);
  max-width: 22ch;
  font-size: clamp(1.8rem, 5.5vw, 2.8rem);
  line-height: 1.15;
  color: var(--color-brand-navy);
  letter-spacing: -.02em;
}
.hero .sottotitolo {
  margin: 0 auto var(--space-6);
  max-width: 58ch;
  font-size: var(--fs-lg);
  color: var(--color-text-soft);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* Livella a bolla — la firma del brand: fiala moderna con liquido ambra,
   bolla fra le tacche, alone dorato leggero (dettaglio, non protagonista) */
.livella-img {
  display: block;
  width: 190px;
  height: auto;
  margin: 0 auto var(--space-5);
}

/* ── Sezioni ────────────────────────────────────────────────────────────── */
section { padding: var(--space-7) 0; }
section.alt { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.sezione-titolo {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-2xl);
  line-height: 1.2;
  color: var(--color-brand-navy);
  text-align: center;
}
.sezione-sotto {
  margin: 0 auto var(--space-6);
  max-width: 60ch;
  text-align: center;
  color: var(--color-text-soft);
}

/* ── Come funziona: 3 passi ─────────────────────────────────────────────── */
.passi { display: grid; gap: var(--space-4); }
.passo {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
section.alt .passo { background: var(--color-surface-2); }
.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}
.passo h3 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); color: var(--color-primary); }
.passo p { margin: 0; color: var(--color-text-soft); }
.passi-coda {
  margin: var(--space-6) auto 0;
  max-width: 60ch;
  text-align: center;
  color: var(--color-text-soft);
}

/* ── Funzioni: card ─────────────────────────────────────────────────────── */
.funzioni { display: grid; gap: var(--space-4); }
.funzione {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.funzione h3 { margin: 0 0 var(--space-2); font-size: var(--fs-base); color: var(--color-primary); }
.funzione p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-soft); }

/* ── Dispositivi (telefono · tablet · computer) ─────────────────────────── */
.dispositivi-img {
  display: block;
  width: min(720px, 100%);
  height: auto;
  margin: 0 auto;
}

/* ── Casetta nelle sezioni ──────────────────────────────────────────────── */
.chisiamo-icona {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-4);
}

/* ── Prezzi (su offerta finché il listino non è definitivo — il layout a
      pacchetti vive nella history di git, commit 4c1b837) ────────────────── */
.prezzo-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.prezzo-cifra { font-size: clamp(2.2rem, 7vw, 3rem); font-weight: var(--fw-bold); color: var(--color-brand-navy); line-height: 1.1; }
.prezzo-cifra small { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--color-text-soft); }
.prezzo-nota { margin: var(--space-2) 0 var(--space-4); color: var(--color-text-soft); }
.prezzo-punti {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-2);
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}
.prezzo-punti li { padding-left: 26px; position: relative; }
.prezzo-punti li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--color-success);
  font-weight: var(--fw-bold);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { max-width: 720px; margin: 0 auto; display: grid; gap: var(--space-3); }
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
}
section.alt .faq details { background: var(--color-surface-2); }
.faq summary {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  cursor: pointer;
  padding: var(--space-2) 0;
}
.faq summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.faq details p { margin: 0 0 var(--space-4); color: var(--color-text-soft); }

/* ── Contatto ───────────────────────────────────────────────────────────── */
.contatto-grid { display: grid; gap: var(--space-5); max-width: 720px; margin: 0 auto; }
.contatto-alt { text-align: center; color: var(--color-text-soft); font-size: var(--fs-sm); }
.contatto-alt a { color: var(--color-primary); font-weight: var(--fw-medium); }

form.contatto {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.field { display: grid; gap: var(--space-1); }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-soft); }
.field input, .field textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--color-danger); }

/* Honeypot: fuori dallo schermo, mai display:none (alcuni bot lo saltano) */
.hp-campo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
}
.alert-error { background: var(--color-danger-bg); color: var(--color-danger-text); border: 1px solid var(--color-danger); }
.alert-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer {
  background: var(--color-brand-navy);
  color: #cfd8e3;
  padding: var(--space-6) 0;
  font-size: var(--fs-sm);
}
.footer-inner { display: grid; gap: var(--space-3); text-align: center; }
footer a { color: #ffffff; text-decoration: underline; }
footer a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.footer-logo { display: block; width: 52px; height: 52px; margin: 0 auto var(--space-2); }

/* ── Pagine legali (privacy, impressum) ─────────────────────────────────── */
.legale { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.legale h1 { color: var(--color-brand-navy); font-size: var(--fs-2xl); }
.legale h2 { color: var(--color-primary); font-size: var(--fs-lg); margin-top: var(--space-6); }
.legale p, .legale li { color: var(--color-text-soft); }
.legale a { color: var(--color-primary); }

/* ── Desktop ────────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .passi { grid-template-columns: repeat(3, 1fr); }
  .funzioni { grid-template-columns: repeat(3, 1fr); }
  .contatto-grid { grid-template-columns: 1fr; }
}
@media (min-width: 720px) and (max-width: 1024px) {
  .funzioni { grid-template-columns: repeat(2, 1fr); }
}