/* Landing sitova.it. Palette porcellana/inchiostro con un solo accento
   viridiano; tipografia Instrument Sans a gerarchia di peso; dual-theme via
   token + prefers-color-scheme. Nessuna dipendenza dal CSS dei tenant. */

:root {
  --carta: #f4f3ef;          /* porcellana, appena calda */
  --carta-alta: #fcfbf9;
  --inchiostro: #182420;
  --bruma: #5d6e66;          /* grigio con bias verde */
  --linea: #dcdcd2;
  --viridiano: #0d5c4b;      /* unico accento */
  --viridiano-vivo: #0f6f5b;
  --salvia: #e5ece7;         /* superficie tinta */
  --scuro: #14231e;          /* cella scura del bento */
  --su-scuro: #e8efe9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --carta: #131917;
    --carta-alta: #1b2320;
    --inchiostro: #e7ece8;
    --bruma: #97a79e;
    --linea: #2a352f;
    --viridiano: #58b298;
    --viridiano-vivo: #6cc4a9;
    --salvia: #1c2723;
    --scuro: #22332c;
    --su-scuro: #e3ece6;
  }
}

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 17px/1.65 "Instrument Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.involucro { max-width: 1200px; margin: 0 auto; padding: 0 1.4rem; }

h1, h2, h3 { line-height: 1.08; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); font-weight: 600; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0; }

/* --- barra ---------------------------------------------------------- */
.barra { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--carta) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.barra__riga { display: flex; align-items: center; gap: 2rem; height: 68px; }
.marchio { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--inchiostro); text-decoration: none; }
.marchio__di { font-size: 0.72rem; font-weight: 500; color: var(--bruma); margin-left: 0.5rem; letter-spacing: 0.01em; }
.barra__nav { display: flex; gap: 1.5rem; margin-left: auto; }
.barra__nav a { color: var(--bruma); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.barra__nav a:hover { color: var(--inchiostro); }
@media (max-width: 719px) { .barra__nav { display: none; } .barra__riga { justify-content: space-between; } }

/* --- cta ------------------------------------------------------------ */
.cta { display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.95rem; border-radius: 10px; transition: transform 0.15s ease, background 0.15s ease; }
.cta:active { transform: translateY(1px); }
.cta--pieno { background: var(--viridiano); color: #f4faf7; padding: 0.6rem 1.15rem; }
.cta--pieno:hover { background: var(--viridiano-vivo); }
.cta--grande { padding: 0.85rem 1.6rem; font-size: 1.02rem; }
.cta--nudo { color: var(--viridiano); padding: 0.85rem 0.4rem; text-underline-offset: 4px; }
.cta--nudo:hover { text-decoration: underline; }
.cta:focus-visible, a:focus-visible { outline: 2px solid var(--viridiano); outline-offset: 3px; }

/* --- eroe ----------------------------------------------------------- */
.eroe { padding: 4.5rem 0 5.5rem; overflow: hidden; }
.eroe__griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: center; }
.eroe__sotto { color: var(--bruma); font-size: 1.13rem; max-width: 44ch; margin-top: 1.3rem; }
.eroe__azioni { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.1rem; flex-wrap: wrap; }
.eroe__visivo { position: relative; min-height: 380px; }
.eroe__shot { position: absolute; width: 78%; height: auto; border-radius: 12px; border: 1px solid var(--linea); box-shadow: 0 24px 60px -18px rgba(20, 40, 33, 0.35); }
.eroe__shot--dietro { top: 0; right: 0; width: 60%; transform: rotate(1.4deg); opacity: 0.85; }
.eroe__shot--davanti { bottom: 0; left: 0; width: 86%; transform: rotate(-1.2deg); }
@media (max-width: 899px) {
  .eroe { padding: 3rem 0 3.5rem; }
  .eroe__griglia { grid-template-columns: 1fr; }
  .eroe__visivo { min-height: 0; height: 300px; }
}

/* --- siti ----------------------------------------------------------- */
.siti { padding: 5.5rem 0; border-top: 1px solid var(--linea); }
.siti__nota { color: var(--bruma); max-width: 58ch; margin: 1rem 0 2.8rem; }
.sito { margin: 0; }
.sito a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sito a:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -20px rgba(20, 40, 33, 0.35); }
.sito img { display: block; width: 100%; height: auto; }
.sito figcaption { margin-top: 0.7rem; font-size: 0.92rem; color: var(--bruma); }
.sito figcaption strong { color: var(--inchiostro); font-weight: 600; margin-right: 0.5rem; }
.sito--grande { margin-bottom: 2.2rem; }
.siti__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
@media (max-width: 719px) { .siti__coppia { grid-template-columns: 1fr; } }

/* --- comprende (bento 5) -------------------------------------------- */
.comprende { padding: 5.5rem 0; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
.cella { background: var(--carta-alta); border: 1px solid var(--linea); border-radius: 12px; padding: 1.6rem 1.5rem; grid-column: span 2; }
.cella p { color: var(--bruma); font-size: 0.97rem; margin-top: 0.6rem; }
.cella--scura { background: var(--scuro); border-color: transparent; grid-column: span 4; }
.cella--scura h3 { color: var(--su-scuro); font-size: 1.35rem; }
.cella--scura p { color: color-mix(in srgb, var(--su-scuro) 72%, transparent); max-width: 52ch; }
.cella--tinta { background: var(--salvia); border-color: transparent; grid-column: span 4; }
.cella--larga { grid-column: span 6; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 1.5rem; align-items: baseline; }
@media (max-width: 899px) { .cella, .cella--scura, .cella--tinta, .cella--larga { grid-column: span 6; display: block; } }

/* --- metodo ---------------------------------------------------------- */
.metodo { padding: 5.5rem 0; border-top: 1px solid var(--linea); }
.passi { list-style: none; counter-reset: passo; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 2.4rem; }
.passo { counter-increment: passo; max-width: 460px; padding-left: 3.4rem; position: relative; }
.passo::before { content: counter(passo); position: absolute; left: 0; top: -0.15rem; font-size: 1.9rem; font-weight: 600; color: var(--viridiano); font-variant-numeric: tabular-nums; }
.passo p { color: var(--bruma); margin-top: 0.4rem; }
.passo--sfalsato { margin-left: clamp(0px, 18vw, 260px); }
@media (max-width: 719px) { .passo--sfalsato { margin-left: 0; } }

/* --- conformità ------------------------------------------------------ */
.conformita { background: var(--salvia); padding: 5rem 0; }
.conformita__interno { max-width: 820px; }
.conformita p { color: var(--bruma); margin-top: 1.2rem; font-size: 1.08rem; max-width: 62ch; }

/* --- finale ----------------------------------------------------------- */
.finale { padding: 6rem 0; text-align: center; }
.finale p { color: var(--bruma); max-width: 46ch; margin: 1.1rem auto 2.2rem; }

/* --- piede ------------------------------------------------------------ */
.piede { border-top: 1px solid var(--linea); padding: 2.2rem 0 2.8rem; }
.piede__riga { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--bruma); }
.piede a { color: var(--inchiostro); text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.piede__nota { color: color-mix(in srgb, var(--bruma) 80%, transparent); }

/* --- reveal ----------------------------------------------------------- */
.rivela { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.rivela--tardi { transition-delay: 0.12s; }
.rivela--visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rivela { opacity: 1; transform: none; transition: none; } }