/* Plus Jakarta Sans, ospitato da noi: nessuna richiesta a terzi,
   come dichiarato nell'informativa privacy. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/font/jakarta-400-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/font/jakarta-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/font/jakarta-500-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/font/jakarta-500-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/font/jakarta-600-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/font/jakarta-600-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/font/jakarta-800-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/font/jakarta-800-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   softwareldv.com — foglio di stile unico.
   Una sola famiglia (Plus Jakarta Sans, ospitata da noi), un solo verde,
   sezioni chiare e scure alternate per dare ritmo alla lettura.
   =========================================================================== */

:root {
  --verde: #0a5f52;
  --verde-cupo: #07473d;
  --verde-lavato: #e7f1ee;
  --scuro: #102b25;
  --lime: #c8eca4;
  --inchiostro: #10231f;
  --grigio: #55706a;
  --grigio-tenue: #7d938e;
  --fondo: #f4f7f5;
  --bordo: #dde6e2;
  --bordo-forte: #c6d5d0;
  --ambra: #7a5a2e;
  --ambra-fondo: #fbf3e7;
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--inchiostro);
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- tipografia ----------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 {
  font-size: clamp(40px, 6.4vw, 74px);
}

h2 {
  font-size: clamp(30px, 4.2vw, 48px);
}

h3 {
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h1 em,
h2 em,
.verde {
  font-style: normal;
  color: var(--verde);
}

p {
  margin: 0 0 1.05em;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 700;
}

a {
  color: var(--verde);
}

.contenitore {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

.stretto {
  max-width: 780px;
}

.occhiello {
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}

.sommario,
.guida {
  font-size: 19px;
  line-height: 1.55;
  color: var(--grigio);
  max-width: 58ch;
}

.postilla {
  font-size: 14.5px;
  color: var(--grigio-tenue);
}

.briciole {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio-tenue);
  margin-bottom: 26px;
}

.briciole a {
  color: var(--verde);
  text-decoration: none;
}

/* --- barra ---------------------------------------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordo);
}

.barra .contenitore {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 78px;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--inchiostro);
  text-decoration: none;
}

.sigla {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--scuro);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.barra nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.barra nav a {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--inchiostro);
  text-decoration: none;
}

.barra nav a:hover {
  color: var(--verde);
}

.lingue {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grigio-tenue);
}

.lingue a {
  color: var(--grigio-tenue);
  text-decoration: none;
}

.lingue .attiva {
  color: var(--inchiostro);
}

@media (max-width: 900px) {
  .barra nav a.nascondi-mobile {
    display: none;
  }
  .barra nav {
    gap: 16px;
  }
}

/* --- bottoni -------------------------------------------------------------- */

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 0 26px;
  border: 1.5px solid var(--scuro);
  border-radius: 13px;
  background: var(--scuro);
  color: #fff !important;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.15s ease;
}

.bottone::after {
  content: "↗";
  font-weight: 500;
  opacity: 0.75;
}

.bottone:hover {
  background: var(--verde-cupo);
  border-color: var(--verde-cupo);
}

.bottone.chiaro {
  background: transparent;
  border-color: var(--bordo-forte);
  color: var(--inchiostro) !important;
}

.bottone.chiaro:hover {
  background: var(--fondo);
  border-color: var(--scuro);
}

.bottone.piccolo {
  min-height: 44px;
  padding: 0 18px;
  gap: 9px;
  font-size: 15px;
  border-radius: 11px;
}

.bottone.lime {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--scuro) !important;
}

.bottone.lime:hover {
  background: #d7f3ba;
  border-color: #d7f3ba;
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 34px 0 18px;
}

/* --- sezioni -------------------------------------------------------------- */

section {
  padding: 88px 0;
}

section.fondo {
  background: var(--fondo);
}

section.scura {
  background: var(--scuro);
  color: #fff;
}

section.scura h2,
section.scura h3 {
  color: #fff;
}

section.scura .occhiello {
  color: var(--lime);
}

section.scura .sommario,
section.scura .guida,
section.scura p {
  color: rgba(255, 255, 255, 0.76);
}

section.scura .verde {
  color: var(--lime);
}

.testa-sezione {
  display: grid;
  gap: 22px;
  align-items: end;
  margin-bottom: 46px;
}

@media (min-width: 900px) {
  .testa-sezione {
    grid-template-columns: 1.25fr 1fr;
    gap: 60px;
  }
}

.testa-sezione h2 {
  margin: 0;
}

/* --- hero ----------------------------------------------------------------- */

.hero {
  padding: 92px 0 72px;
}

.hero p.guida {
  font-size: 20px;
  max-width: 54ch;
}

.hero-doppio {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 980px) {
  .hero-doppio {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 64px;
  }
}

/* --- striscia di fatti ---------------------------------------------------- */

.striscia {
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  background: #fff;
}

.striscia .contenitore {
  display: grid;
  gap: 14px 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: 15px;
  color: var(--grigio);
}

.striscia b {
  color: var(--inchiostro);
  font-weight: 700;
}

/* --- griglie e schede ----------------------------------------------------- */

.griglia {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.scheda {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 18px;
  padding: 30px;
}

section.fondo .scheda {
  border-color: var(--bordo-forte);
}

section.scura .scheda {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.scheda h3 {
  margin-bottom: 10px;
}

.scheda p {
  font-size: 16px;
  color: var(--grigio);
  margin-bottom: 0;
}

section.scura .scheda p {
  color: rgba(255, 255, 255, 0.74);
}

.numero {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--verde);
}

section.scura .numero {
  color: var(--lime);
}

/* --- elenco a movimenti --------------------------------------------------- */

.mosse {
  display: grid;
  border-top: 1px solid var(--bordo);
}

section.scura .mosse {
  border-color: rgba(255, 255, 255, 0.16);
}

.mossa {
  display: grid;
  gap: 8px 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--bordo);
}

section.scura .mossa {
  border-color: rgba(255, 255, 255, 0.16);
}

@media (min-width: 800px) {
  .mossa {
    grid-template-columns: 240px 1fr;
    align-items: baseline;
  }
}

.mossa .nome {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--verde);
}

section.scura .mossa .nome {
  color: var(--lime);
}

.mossa p {
  font-size: 16.5px;
  color: var(--grigio);
  max-width: 56ch;
  margin: 0;
}

section.scura .mossa p {
  color: rgba(255, 255, 255, 0.74);
}

/* --- scheda prodotto ------------------------------------------------------ */

.prodotto {
  display: grid;
  gap: 46px;
  align-items: center;
}

@media (min-width: 900px) {
  .prodotto {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.marchio-prodotto {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.marchio-prodotto img {
  width: 52px;
  height: 52px;
  border-radius: 13px;
}

.marchio-prodotto h3 {
  font-size: 30px;
  font-weight: 800;
  margin: 0;
}

/* --- elenchi con segno ---------------------------------------------------- */

ul.segni {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

ul.segni li {
  position: relative;
  padding-left: 30px;
  font-size: 16.5px;
}

ul.segni li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 700;
  color: var(--verde);
}

section.scura ul.segni li::before {
  color: var(--lime);
}

ul.segni.no li::before {
  content: "✕";
  color: #a8503f;
}

/* --- prezzi --------------------------------------------------------------- */

.prezzi {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
}

.piano {
  background: #fff;
  border: 1px solid var(--bordo-forte);
  border-radius: 22px;
  padding: 34px;
}

.piano.evidenza {
  background: var(--verde-lavato);
  border-color: var(--verde);
}

.piano h3 {
  font-size: 21px;
  margin-bottom: 22px;
}

.cifra {
  font-size: clamp(44px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 10px;
}

.cifra span {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--grigio);
}

.etichetta {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--verde-cupo);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.piano ul.segni {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--bordo);
}

.piano ul.segni li {
  font-size: 15.5px;
}

/* --- domande -------------------------------------------------------------- */

details {
  border-bottom: 1px solid var(--bordo);
  padding: 22px 0;
}

details summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: "+";
  font-weight: 500;
  color: var(--verde);
  font-size: 24px;
  line-height: 1;
}

details[open] summary::after {
  content: "−";
}

details .risposta {
  padding-top: 14px;
  color: var(--grigio);
  max-width: 68ch;
}

details .risposta p:last-child {
  margin-bottom: 0;
}

/* --- avvisi --------------------------------------------------------------- */

.avviso {
  border-radius: 18px;
  background: var(--ambra-fondo);
  padding: 24px 26px;
  color: var(--ambra);
  font-size: 15.5px;
  line-height: 1.55;
}

.tbd {
  background: #ffe9a8;
  color: #6b4b00;
  padding: 0 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* --- contatti ------------------------------------------------------------- */

.contatti {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.contatti .scheda p {
  margin-bottom: 5px;
}

/* --- piede ---------------------------------------------------------------- */

footer {
  background: var(--scuro);
  color: rgba(255, 255, 255, 0.72);
  padding: 72px 0 44px;
  font-size: 15px;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

footer .marchio {
  color: #fff;
  margin-bottom: 18px;
}

footer .sigla {
  background: #fff;
  color: var(--scuro);
}

footer h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.piede-griglia {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.6fr 1fr 1fr;
}

@media (max-width: 800px) {
  .piede-griglia {
    grid-template-columns: 1fr 1fr;
  }
}

footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer li {
  margin-bottom: 10px;
}

.pagamenti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.carta {
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  font-size: 12.5px;
}

.piede-basso {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* --- pagine legali -------------------------------------------------------- */

.legale {
  padding: 68px 0 88px;
}

.legale h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  margin-bottom: 14px;
}

.legale h2 {
  font-size: 24px;
  margin-top: 46px;
  margin-bottom: 14px;
}

.legale .aggiornato {
  font-size: 15px;
  color: var(--grigio-tenue);
}

.legale ul,
.legale ol {
  margin: 0 0 1em;
  padding-left: 24px;
}

.legale li {
  margin-bottom: 9px;
}

.legale table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.6em;
  font-size: 15.5px;
}

.legale th,
.legale td {
  border: 1px solid var(--bordo);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.legale th {
  background: var(--fondo);
  font-weight: 700;
}

.scatola-dati {
  border-radius: 18px;
  background: var(--fondo);
  padding: 26px 28px;
  margin-bottom: 34px;
}

.scatola-dati p {
  margin: 0 0 5px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- dimostrazione dell'app -------------------------------------------------
   Riproduce la schermata «Genera» reale: quattro numeri, i tipi di visita,
   il pulsante che apre WhatsApp, le tre voci in basso. Resta chiara e chiara
   in entrambi i temi, come farebbe la fotografia di uno schermo. */

.app-demo {
  --demo-fondo: #eef2f0;
  --demo-verde: #0b6b5f;
  --demo-verde-chiaro: #dcebe6;
  --demo-bordo: #dce4e0;
  --demo-inchiostro: #14312e;
  --demo-grigio: #5a716d;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.app-demo-eti {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grigio);
}

.app-demo-eti::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accento);
}

.app-schermo {
  background: var(--demo-fondo);
  border: 1px solid var(--demo-bordo);
  border-radius: 22px;
  padding: 22px 20px 14px;
  color: var(--demo-inchiostro);
  box-shadow: 0 18px 40px rgba(12, 31, 44, 0.14);
  max-width: 380px;
}

.app-numeri {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--demo-bordo);
}

.app-numeri div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: center;
}

.app-numeri b {
  font-size: 21px;
  font-weight: 700;
  color: var(--demo-verde);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.app-numeri span {
  font-size: 11px;
  color: var(--demo-grigio);
}

.app-titolo {
  font-family:
    Iowan Old Style,
    Palatino,
    Georgia,
    serif;
  font-size: 21px;
  font-weight: 600;
  margin: 20px 0 14px;
  color: var(--demo-inchiostro);
}

.app-scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.app-scelte span {
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 11px;
  border: 1.5px solid var(--demo-bordo);
  background: #fff;
  color: var(--demo-grigio);
}

.app-scelte .sel {
  border-color: var(--demo-verde);
  background: var(--demo-verde-chiaro);
  color: var(--demo-verde);
  font-weight: 600;
}

.app-invia {
  margin-top: 16px;
  padding: 15px;
  border-radius: 14px;
  background: var(--demo-verde);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
}

.app-nav {
  display: flex;
  justify-content: space-around;
  margin: 18px -20px 0;
  padding: 12px 0 2px;
  border-top: 1px solid var(--demo-bordo);
  font-size: 13.5px;
  color: var(--demo-grigio);
}

.app-nav b {
  color: var(--demo-verde);
  font-weight: 600;
}

.app-nota {
  font-size: 14px;
  line-height: 1.5;
  color: var(--grigio);
  max-width: 380px;
  margin: 0;
}

/* la dimostrazione resta leggibile anche sopra una sezione scura */
section.scura .app-demo-eti,
section.scura .app-nota {
  color: rgba(255, 255, 255, 0.72);
}

section.scura .app-demo-eti::before {
  background: var(--lime);
}

/* nell'apertura a due colonne il titolo ha meno spazio: scala di conseguenza */
.hero-doppio h1 {
  font-size: clamp(34px, 4.3vw, 56px);
}