/* ============================================================
   iLivari — landing
   Il colore racconta la tesi della pagina:
   BLU BIRO = i numeri scritti a mano dal coltivatore (il problema)
   VERDE/ORO = il conto che ne ricava iLivari (la risposta)
   ============================================================ */

@font-face{font-family:'Bricolage';src:url('/fonts/bricolage.woff2') format('woff2-variations');
  font-weight:200 800;font-display:swap}
@font-face{font-family:'SourceSerif';src:url('/fonts/sourceserif.woff2') format('woff2-variations');
  font-weight:200 900;font-display:swap}
@font-face{font-family:'PlexMono';src:url('/fonts/plexmono-400.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'PlexMono';src:url('/fonts/plexmono-600.woff2') format('woff2');
  font-weight:600;font-display:swap}
@font-face{font-family:'Caveat';src:url('/fonts/caveat.woff2') format('woff2');
  font-weight:500;font-display:swap}

:root{
  --carta:#FBFAF7;
  --carta-2:#F1EFE7;
  --quadretto:#E3E6DC;
  --inchiostro:#16201A;
  --grigio:#5A6560;
  --biro:#2B4BA0;
  --oliva:#37624A;
  --oliva-scuro:#1E3A2B;
  --olio:#D69E1E;        /* oro: solo su fondo scuro, o come sfondo */
  --olio-testo:#8F6208;  /* oro leggibile su carta: 4.6:1, passa WCAG AA */

  --serif:'SourceSerif',Georgia,serif;
  --display:'Bricolage','Helvetica Neue',Arial,sans-serif;
  --mono:'PlexMono',ui-monospace,monospace;
  --hand:'Caveat','Segoe Script',cursive;

  --pad:clamp(1.25rem,5vw,5rem);
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--serif);font-size:clamp(1.02rem,.55vw + .92rem,1.14rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:0}
h1 em,h2 em{font-style:normal;color:var(--oliva);position:relative}
p{margin:0 0 1rem}
img,svg{max-width:100%}

a{color:var(--oliva);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--biro);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;min-height:44px}
.skip:focus{left:1rem;top:1rem;z-index:99;display:inline-flex;align-items:center;min-height:44px;
  background:var(--inchiostro);color:#fff;padding:.7rem 1.1rem;border-radius:8px}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--oliva);
  margin:0 0 1rem;
}

/* ---------- bottoni (tap target >= 44px) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;text-decoration:none;
  background:var(--oliva-scuro);color:#fff;border-radius:999px;
  padding:.85rem 1.5rem;min-height:46px;
  box-shadow:0 1px 0 rgba(0,0,0,.18);
  transition:transform .18s ease,background .18s ease;
}
.btn:hover{background:var(--inchiostro);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1.05rem;min-height:44px;font-size:.95rem}
.btn-lg{padding:1rem 1.8rem;font-size:1.06rem}
.btn-light{background:var(--olio);color:var(--inchiostro)}
.btn-light:hover{background:#fff}
.btn-ghost{
  display:inline-flex;align-items:center;min-height:46px;
  font-family:var(--display);font-weight:600;color:var(--inchiostro);
  text-decoration:none;border-bottom:2px solid var(--olio);padding:.2rem 0;
}
.btn-ghost:hover{color:var(--oliva)}

/* ---------- header ---------- */
.head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:1rem;
  padding:.75rem var(--pad);
  background:rgba(251,250,247,.88);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--quadretto);
}
.brand{
  display:flex;align-items:center;gap:.5rem;margin-right:auto;min-height:44px;
  font-family:var(--display);font-weight:800;font-size:1.24rem;
  color:var(--inchiostro);text-decoration:none;letter-spacing:-.02em;
}
.nav{display:flex;gap:1.6rem;margin-right:1.2rem}
.nav a{
  display:inline-flex;align-items:center;min-height:44px; /* tap target */
  font-family:var(--display);font-weight:600;font-size:.95rem;
  color:var(--grigio);text-decoration:none;
}
.nav a:hover{color:var(--inchiostro)}
@media(max-width:820px){.nav{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(2rem,4vw,4.5rem);
  align-items:center;
  padding:clamp(3rem,7vw,6rem) var(--pad) clamp(3rem,6vw,5rem);
  max-width:1360px;margin:0 auto;
}
@media(max-width:940px){.hero{grid-template-columns:1fr;gap:2.75rem}}

h1{font-size:clamp(2.5rem,6.4vw,4.6rem)}
.lede{font-size:clamp(1.1rem,.7vw + .95rem,1.3rem);color:var(--grigio);max-width:34ch;margin:1.6rem 0 0}
.lede strong{color:var(--inchiostro)}
.cta-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;margin-top:2.2rem}
.note{font-family:var(--mono);font-size:.78rem;color:var(--grigio);margin-top:1.1rem}

/* ---------- SIGNATURE: quaderno -> conto ---------- */
.ledger{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.9rem;position:relative}
@media(max-width:1100px){
  .ledger{grid-template-columns:1fr;gap:.4rem;max-width:460px}
  .arrow{transform:rotate(90deg);margin:.3rem auto}
}

/* il quaderno a quadretti */
.paper{
  margin:0;padding:1.4rem 1.3rem 1.6rem;border-radius:4px;
  background:
    repeating-linear-gradient(var(--quadretto) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,var(--quadretto) 0 1px,transparent 1px 22px),
    var(--carta-2);
  border:1px solid #DAD8CC;
  box-shadow:0 12px 26px -18px rgba(22,32,26,.4);
  transform:rotate(-1.4deg);
}
.paper-head,.panel-head{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio);margin-bottom:.9rem;
}
.hand{font-family:var(--hand);color:var(--biro);font-size:1.5rem;line-height:1.5}
.hand p{margin:0;display:flex;justify-content:space-between;gap:1rem}
.hand b{font-weight:500}
.hand-date{margin-bottom:.5rem !important;display:block !important}
.hand-q{
  display:block !important;margin-top:1rem !important;
  font-size:1.6rem;line-height:1.25;position:relative;
}
.scribble{
  position:absolute;right:.2rem;bottom:-.5rem;
  font-size:3.4rem;color:var(--biro);opacity:.9;transform:rotate(8deg);
}

.arrow{color:var(--oliva);width:60px;display:flex;justify-content:center}
.arrow svg{width:52px}

/* il pannello iLivari */
.panel{
  margin:0;padding:1.5rem 1.4rem 1.3rem;border-radius:var(--r);
  background:var(--oliva-scuro);color:#F2F3EF;
  box-shadow:0 26px 50px -26px rgba(30,58,43,.75);
}
.panel-head{color:#9BB3A3;display:flex;align-items:center;gap:.45rem;margin-bottom:1.1rem}
.rows{margin:0}
.row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.09);
}
.row dt{font-size:.94rem;color:#A9BEB1}
.row dd{margin:0;font-family:var(--mono);font-size:1.04rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.row-key{border-bottom:0;margin-top:.5rem;padding-top:.9rem;border-top:2px solid var(--olio)}
.row-key dt{color:#fff;font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.2}
.row-key dd{color:var(--olio);font-size:clamp(1.35rem,1.1vw + 1.1rem,1.7rem)}
.panel-foot{
  margin:1rem 0 0;font-size:.86rem;color:#9BB3A3;
  font-family:var(--mono);
}
.panel-foot b{color:#fff}
.ledger-note{
  grid-column:1/-1;margin:1.1rem 0 0;text-align:center;
  font-family:var(--mono);font-size:.7rem;color:var(--grigio);
}

/* ============================================================
   BAND (il problema)
   ============================================================ */
.band{background:var(--carta-2);border-top:1px solid var(--quadretto);border-bottom:1px solid var(--quadretto)}
.band-in{max-width:780px;margin:0 auto;padding:clamp(3rem,6vw,5rem) var(--pad)}
.band h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:1.2rem}
.band p{font-size:clamp(1.05rem,.6vw + .95rem,1.22rem);color:var(--grigio);margin:0}
.band strong{color:var(--inchiostro)}

/* ============================================================
   SEZIONI
   ============================================================ */
.section{max-width:1180px;margin:0 auto;padding:clamp(3.5rem,7vw,6.5rem) var(--pad)}
.section-head{max-width:44ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.section-head h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
.section-lede{color:var(--grigio);margin-top:1rem}

/* ---------- i quattro momenti ---------- */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--quadretto);border:1px solid var(--quadretto);border-radius:var(--r);overflow:hidden;
}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--carta);padding:1.9rem 1.5rem 2.1rem;transition:background .2s ease}
.step:hover{background:#fff}
.step-n{
  font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--olio-testo);
  margin:0 0 1.4rem;letter-spacing:.1em;
}
.step h3{font-size:1.22rem;margin-bottom:.7rem}
.step p{font-size:.98rem;color:var(--grigio);margin:0}
.step b{color:var(--inchiostro);font-weight:600}

/* ---------- il conto ---------- */
.conto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:900px){.conto{grid-template-columns:1fr}}
.conto h2{font-size:clamp(1.85rem,3.6vw,2.9rem);margin-bottom:1.3rem}
.conto p{color:var(--grigio)}
.conto b{color:var(--inchiostro);font-family:var(--mono);font-weight:600}
.conto .btn{margin-top:1rem}

.formula{
  background:#fff;border:1px solid var(--quadretto);border-radius:var(--r);
  padding:clamp(1.4rem,2.5vw,2rem);
  box-shadow:0 20px 40px -30px rgba(22,32,26,.5);
}
.f-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0}
.f-lab{color:var(--grigio);font-size:.98rem}
.f-val{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.f-val.pos{color:var(--oliva)}
.f-val.neg{color:#A8543A}
.f-rule{height:2px;background:var(--inchiostro);margin:.6rem 0}
.f-tot .f-lab{font-family:var(--display);font-weight:800;color:var(--inchiostro);font-size:1.1rem}
.f-tot .f-val{font-size:1.6rem}
.f-sub{padding-top:.2rem}
.f-sub .f-lab,.f-sub .f-val{font-size:.82rem;color:var(--grigio)}
.f-sub .f-val{color:var(--olio-testo);font-weight:600}

/* ---------- per chi ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.5rem)}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.col{padding:1.8rem;border-radius:var(--r);border:1px solid var(--quadretto)}
.col.yes{background:#fff;border-left:4px solid var(--oliva)}
.col.no{background:transparent;border-left:4px solid var(--quadretto)}
.col h3{font-size:1.15rem;margin-bottom:1.1rem}
.col ul{margin:0;padding-left:1.1rem}
.col li{margin-bottom:.6rem;color:var(--grigio)}
.col.no li{color:#8A918C}

/* ---------- facile ---------- */
.easy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,1.8rem)}
@media(max-width:760px){.easy-grid{grid-template-columns:1fr}}
.card{
  background:#fff;border:1px solid var(--quadretto);border-radius:var(--r);
  padding:1.7rem 1.6rem;transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(22,32,26,.5)}
.card h3{font-size:1.15rem;margin-bottom:.65rem}
.card p{margin:0;color:var(--grigio);font-size:.98rem}

/* ---------- faq ---------- */
.faq-list{border-top:1px solid var(--quadretto);max-width:800px}
details{border-bottom:1px solid var(--quadretto)}
summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:1.06rem;min-height:44px;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:1.4rem;color:var(--oliva);
}
details[open] summary::after{content:"–"}
details p{color:var(--grigio);margin:0 0 1.35rem;max-width:68ch}

/* ---------- chiusura ---------- */
.close{
  background:var(--oliva-scuro);color:#fff;text-align:center;
  padding:clamp(3.5rem,7vw,6rem) var(--pad);
}
.close h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1rem}
.close p{color:#A9BEB1;margin-bottom:2rem}

/* ---------- footer ---------- */
.foot{background:var(--inchiostro);color:#9AA39E;padding:clamp(2.5rem,5vw,3.5rem) var(--pad)}
.foot-in{max-width:1180px;margin:0 auto}
.foot-brand{font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff;margin:0 0 .4rem}
.foot p{margin:0 0 1.4rem;font-size:.95rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-bottom:1.6rem}
.foot-nav a{
  display:inline-flex;align-items:center;min-height:44px; /* tap target */
  color:#D6DBD7;text-decoration:none;font-family:var(--display);font-weight:600;font-size:.95rem;
}
.foot-nav a:hover{color:var(--olio)}
.foot-legal{font-family:var(--mono);font-size:.75rem;margin:0;color:#6E7873}

/* ============================================================
   MOTION — una sola idea: le cose entrano come si sfoglia un quaderno.
   Nota: l'animazione e' gated su .js (aggiunta dallo script nel <head>).
   Senza JavaScript il contenuto e' semplicemente visibile: una landing
   non puo' dipendere da uno script per mostrare le parole.
   ============================================================ */
.js .reveal,.js .reveal-panel{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in,.js .reveal-panel.in{opacity:1;transform:none}
.js .reveal-panel{transition-delay:.15s}
.js .hero .reveal:nth-child(2){transition-delay:.06s}
.js .hero .reveal:nth-child(3){transition-delay:.12s}
.js .hero .reveal:nth-child(4){transition-delay:.18s}
.js .hero .reveal:nth-child(5){transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal,.js .reveal-panel{opacity:1;transform:none}
  .paper{transform:none}
}