/* ============================================================
   ARVA — Sito corporativo
   Derivato da 01_Branding/Design System (arvatech.tokens.css,
   arvapp.tokens.css, arvatech-design-system.html)

   Famiglia corporativa (ARVA / ARVAMIND / ARVASET):
     azzurro #388bc0 + grigio #706f6f, Montserrat
   Prodotto (ARVAPP):
     verde #51812f + arancio #d9820b, Nunito
   ============================================================ */

/* ===================== FONT AUTOSPITATI =====================
   Nessuna richiesta a Google Fonts: i file sono serviti dal
   dominio del sito. Sceltta voluta, non solo di prestazioni:
   evita di esporre l'IP del visitatore a un terzo extra-UE. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/montserrat-500.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/montserrat-700.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/montserrat-800.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nunito-400.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/nunito-600.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/nunito-800.woff2) format('woff2');}

/* ===================== TOKEN ===================== */
:root{
  /* Marca corporativa */
  --arva-blue:#388bc0; --arva-blue-dark:#1d5a82; --arva-gray:#706f6f;
  --arva-blue-50:#edf4fa; --arva-blue-100:#d3e6f3; --arva-blue-200:#a9cde6;
  --arva-blue-700:#266189; --arva-blue-900:#163f5c;

  /* Marca prodotto */
  --app-green:#51812f; --app-green-dark:#3a5f21; --app-orange:#d9820b;
  --app-green-50:#eef5e8; --app-green-100:#d5e8c5; --app-orange-50:#fdf3e5;

  /* Neutri del documento — inclinazione fredda verso l'azzurro */
  --bg:#eef2f6; --surface:#ffffff; --surface-2:#f6f9fb;
  --ink:#152430; --muted:#5a6d7b; --border:#dce4ec; --border-strong:#c3cfda;
  --hero:#12303f;

  --display:'Montserrat',system-ui,-apple-system,sans-serif;
  --body:'Montserrat',system-ui,-apple-system,sans-serif;
  --nunito:'Nunito',system-ui,-apple-system,sans-serif;

  --maxw:1120px;
  --r:14px;
  --shadow:0 1px 2px rgba(20,40,55,.06),0 10px 30px -12px rgba(20,40,55,.18);
  --shadow-lg:0 2px 4px rgba(20,40,55,.06),0 24px 60px -20px rgba(20,40,55,.28);

  /* Accento corrente della sezione — riscritto da .band-app */
  --accent:var(--arva-blue);
  --accent-dark:var(--arva-blue-dark);
  --accent-2:var(--arva-gray);
  --accent-soft:var(--arva-blue-50);
}

/* Il tema segue il sistema operativo, ma l'interruttore in barra puo'
   forzarlo: da qui la doppia scrittura. La media query si tira
   indietro se l'utente ha scelto "chiaro" (:not([data-theme="light"]));
   [data-theme="dark"] vince in ogni caso. Le due liste vanno tenute
   identiche: in CSS puro non c'e' modo di scriverne una sola. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d151c; --surface:#141f28; --surface-2:#101a22;
    --ink:#e9f1f7; --muted:#94a7b6; --border:#243441; --border-strong:#31485a;
    --hero:#0a1720;
    --arva-gray:#9b9a9a;   /* il #706f6f di marca non passa il contrasto su fondo scuro */
    --arva-blue-50:#16283a; --arva-blue-100:#1b3346;
    --app-green-50:#18240f; --app-green-100:#1f3014; --app-orange-50:#2b1d07;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 40px -16px rgba(0,0,0,.7);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 28px 70px -22px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
    --bg:#0d151c; --surface:#141f28; --surface-2:#101a22;
    --ink:#e9f1f7; --muted:#94a7b6; --border:#243441; --border-strong:#31485a;
    --hero:#0a1720;
    --arva-gray:#9b9a9a;   /* il #706f6f di marca non passa il contrasto su fondo scuro */
    --arva-blue-50:#16283a; --arva-blue-100:#1b3346;
    --app-green-50:#18240f; --app-green-100:#1f3014; --app-orange-50:#2b1d07;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 40px -16px rgba(0,0,0,.7);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 28px 70px -22px rgba(0,0,0,.85);
}

/* ===================== BASE ===================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-weight:500;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.01em;}
p{margin:0;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
ul{margin:0;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.narrow{max-width:780px;}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent-dark);color:#fff;padding:12px 20px;z-index:200;font-family:var(--display);font-weight:700;border-radius:0 0 8px 0;}
.skip:focus{left:0;text-decoration:none;}

.eyebrow{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0;}
.lead{font-size:18px;color:var(--muted);max-width:64ch;line-height:1.55;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ===================== NAVIGAZIONE ===================== */
header.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-in{display:flex;align-items:center;gap:16px;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 24px;}
/* Marchio in barra: isotipo + logotipo composto, non il lockup
   completo. Il lockup e quasi quadrato (400x266): dentro una
   barra da 64px starebbe a ~40px di altezza, e la dicitura
   "AGRITECH & SERVICES" diventerebbe illeggibile. */
.nav-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink);}
.nav-brand:hover{text-decoration:none;}
.nav-brand img{height:32px;width:32px;object-fit:contain;}
/* Due isotipi, uno per tema. Non un <picture> con media query: quello
   guarda solo il sistema operativo e ignorerebbe l'interruttore. */
.nav-brand .mk-dark{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav-brand .mk-light{display:none;}
  :root:not([data-theme="light"]) .nav-brand .mk-dark{display:block;}
}
:root[data-theme="dark"] .nav-brand .mk-light{display:none;}
:root[data-theme="dark"] .nav-brand .mk-dark{display:block;}
:root[data-theme="light"] .nav-brand .mk-light{display:block;}
:root[data-theme="light"] .nav-brand .mk-dark{display:none;}
.nb-txt{display:flex;flex-direction:column;line-height:1;}
.nb-txt b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.005em;color:var(--arva-blue);}
.nb-txt small{font-family:var(--display);font-weight:700;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
@media (max-width:400px){.nb-txt small{display:none;}}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav-links a{
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.03em;
  color:var(--muted);padding:8px 11px;border-radius:8px;text-transform:uppercase;white-space:nowrap;
  transition:color .15s,background .15s;
}
.nav-links a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none;}
/* :not(.nav-cta) e obbligatorio: su contatti.html il bottone porta
   aria-current, e questo sfondo chiaro cancellerebbe il testo bianco. */
.nav-links a[aria-current="page"]:not(.nav-cta){color:var(--arva-blue-dark);background:var(--arva-blue-50);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav-links a[aria-current="page"]:not(.nav-cta){color:#7fb4d9;}}
:root[data-theme="dark"] .nav-links a[aria-current="page"]:not(.nav-cta){color:#7fb4d9;}
.nav-cta[aria-current="page"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--arva-blue) 30%,transparent);}
.nav-cta{
  font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;
  background:var(--arva-blue);color:#fff!important;padding:9px 16px;border-radius:100px;margin-left:8px;white-space:nowrap;
  transition:filter .15s;
}
.nav-cta:hover{filter:brightness(1.08);text-decoration:none;}

/* ---- Voci con sottomenu delle sezioni ----
   La voce resta un link alla pagina: il sottomenu e' una scorciatoia
   ai suoi paragrafi, non un ostacolo per arrivarci. */
.nav-item{position:relative;display:flex;align-items:center;align-self:stretch;}
.sub{
  display:none;list-style:none;margin:0;padding:8px;
  position:absolute;top:100%;left:0;min-width:270px;z-index:70;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-lg);
}
.nav-links .sub a{
  display:flex;align-items:baseline;gap:11px;
  padding:9px 12px;border-radius:8px;
  font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--ink);white-space:nowrap;
}
.nav-links .sub a:hover{background:var(--arva-blue-50);color:var(--arva-blue-dark);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav-links .sub a:hover{color:#7fb4d9;}}
:root[data-theme="dark"] .nav-links .sub a:hover{color:#7fb4d9;}
.sub .n{
  font-size:11px;color:var(--arva-blue);flex-shrink:0;
  font-variant-numeric:tabular-nums;font-weight:800;
}
.sub-toggle{display:none;}

@media (min-width:941px){
  /* :focus-within tiene aperto il menu anche da tastiera: senza,
     sarebbe raggiungibile solo col mouse. */
  .nav-item:hover > .sub,
  .nav-item:focus-within > .sub{display:block;}
  /* L'ultima voce prima del bottone sborderebbe a destra. */
  .nav-item:last-of-type > .sub{left:auto;right:0;}
}

/* ---- Interruttore chiaro / scuro ----
   Mostra l'icona di dove si va, non di dove si e': in tema chiaro la
   luna, in tema scuro il sole. Le due icone si scambiano via CSS, cosi'
   la prima resa e' gia' giusta e non c'e' da aspettare il JavaScript. */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;margin-left:10px;
  background:transparent;border:1px solid var(--border-strong);
  border-radius:9px;cursor:pointer;color:var(--muted);
  transition:color .15s,background .15s,border-color .15s;
}
.theme-toggle:hover{color:var(--ink);background:var(--surface-2);border-color:var(--ink);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .ico-sun{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ico-sun{display:block;}
  :root:not([data-theme="light"]) .theme-toggle .ico-moon{display:none;}
}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:none;}
:root[data-theme="light"] .theme-toggle .ico-sun{display:none;}
:root[data-theme="light"] .theme-toggle .ico-moon{display:block;}

/* ---- Selettore di lingua ----
   Due link, non un menu a tendina: cambiare lingua e' una navigazione
   verso una pagina che esiste davvero, e deve poterla seguire anche un
   motore di ricerca. Ogni pagina punta alla propria gemella, non alla
   home: chi sta leggendo i piani di ARVAPP in italiano vuole i piani
   di ARVAPP in spagnolo, non ricominciare da capo. */
.lang-switch{
  display:flex;align-items:center;flex-shrink:0;
  margin-left:10px;padding:2px;
  border:1px solid var(--border-strong);border-radius:9px;
}
.lang-switch a{
  font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.06em;
  line-height:1;padding:6px 9px;border-radius:6px;
  color:var(--muted);text-transform:uppercase;
  transition:color .15s,background .15s;
}
.lang-switch a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none;}
/* La lingua corrente e' un link a se stessa: resta cliccabile, ma si
   vede che e' quella attiva. Marcata con aria-current, come le voci
   del menu, cosi' anche un lettore di schermo lo annuncia. */
.lang-switch a[aria-current="true"]{background:var(--arva-blue);color:#fff;}

.nav-toggle{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--border-strong);
  border-radius:9px;width:42px;height:38px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;
}
.nav-toggle svg{width:20px;height:20px;}
.nav-toggle .ico-close{display:none;}
.nav-toggle[aria-expanded="true"] .ico-open{display:none;}
.nav-toggle[aria-expanded="true"] .ico-close{display:block;}
@media (max-width:940px){
  /* Hamburger a sinistra del marchio: order:-1 lo porta in testa
     alla riga, e il marchio si prende lo spazio che avanza.
     L'interruttore del tema resta in barra, non dentro il pannello:
     serve anche a menu chiuso. */
  .nav-toggle{display:flex;order:-1;margin-left:0;}
  .nav-brand{order:0;margin-right:auto;}
  .theme-toggle{order:1;margin-left:0;}
  .lang-switch{order:1;margin-left:0;}
  .nav-in{gap:12px;}

  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;padding:12px 16px 18px;
    background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .nav-links.open{display:flex;}
  .nav-links a{font-size:14px;padding:11px 12px;}
  .nav-cta{margin-left:0;margin-top:8px;text-align:center;border-radius:10px;padding:12px 16px;font-size:13.5px;}

  /* Senza hover il sottomenu va aperto a mano: la freccia lo fa.
     I sottomenu nascono chiusi, altrimenti il pannello diventa
     una lista di venticinque righe da scorrere. */
  .nav-item{flex-wrap:wrap;align-self:auto;}
  .nav-item > a{flex:1;}
  .sub-toggle{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:42px;height:42px;background:transparent;border:0;
    color:var(--muted);cursor:pointer;border-radius:8px;
  }
  .sub-toggle:hover{background:var(--surface-2);color:var(--ink);}
  .sub-toggle svg{width:15px;height:15px;transition:transform .15s;}
  .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
  .sub{
    position:static;order:3;width:100%;min-width:0;
    border:0;border-left:2px solid var(--border);border-radius:0;
    box-shadow:none;background:transparent;
    margin:0 0 6px 13px;padding:2px 0 6px 10px;
  }
  .sub-toggle[aria-expanded="true"] + .sub{display:block;}
  .nav-links .sub a{white-space:normal;font-size:13.5px;padding:9px 10px;}
}

/* ===================== HERO ===================== */
.hero{background:var(--hero);color:#eef4f9;position:relative;overflow:hidden;}
.hero .wrap{position:relative;z-index:2;padding:80px 24px 96px;}
.hero-sm .wrap{padding:60px 24px 72px;}
/* Qui stava .peaks, il motivo SVG delle colline ripreso dall'isotipo.
   Ora ogni hero porta la fotografia del vigneto, che le montagne le ha
   davvero, e la regola non serviva piu' a nessuna pagina. Il motivo
   originale resta in 01_Branding/Design System/arvatech-design-system.html
   e nella storia di questo file, se un giorno tornasse utile. */
.hero .eyebrow{color:#7f9cae;margin-bottom:18px;}
.hero h1{font-size:clamp(34px,6vw,64px);color:#fff;max-width:17ch;}
.hero h1 em{font-style:normal;color:var(--arva-blue);}
.hero .lead{color:#a9c2d3;margin-top:22px;font-size:clamp(16px,2.2vw,20px);max-width:60ch;}
.hero-mark{height:56px;width:auto;margin-bottom:26px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}
.hero-meta{display:flex;gap:36px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);}
.hero-meta div{display:flex;flex-direction:column;gap:3px;}
.hero-meta .k{font-family:var(--display);font-weight:800;font-size:24px;color:#fff;line-height:1;}
.hero-meta .v{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#7f9cae;}
/* Su schermo stretto i quattro dati si impilano uno per riga e
   spingono il resto della pagina sotto la piega: due colonne. */
@media (max-width:600px){.hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;}}

/* Hero e chiusura di prodotto: la stessa fotografia che ARVAPP usa
   nel banner della dashboard.

   Nell'applicazione la foto sta pulita, senza velature: il testo bianco
   si stacca con un solo text-shadow (Layout.css, .dashboard-banner-text).

   Quanta velatura serve qui e' una misura, non un gusto. La fotografia
   e' gia' smorzata di suo — luminanza massima 161 su 255 — e il testo
   e' bianco. Contrasto del bianco sul punto piu' chiaro della zona di
   testo, al variare della velatura:

       nessuna  2.76   insufficiente
       0.20     3.93   basta solo per il titolo
       0.30     4.80   passa AA anche per il paragrafo
       0.40     5.86
       0.88    15.65   quello che c'era prima: sei volte il necessario

   Da qui i valori sotto: 0.40 dove sta il testo, in calo fino a 0.12
   sulla destra, dove non c'e' testo e la foto resta come nel login.
   Il colore pieno e' il fallback se la webp non carica. */
.hero-app,
.cta.hero-app{
  background-color:#16260d;
  background-image:
    linear-gradient(96deg,
      rgba(10,22,5,.40) 0%,
      rgba(10,22,5,.36) 45%,
      rgba(10,22,5,.32) 65%,
      rgba(10,22,5,.12) 100%),
    url(../img/vigneto.webp);
  background-size:auto,cover;
  background-position:center,center 40%;
  background-repeat:no-repeat,no-repeat;
}
.hero-app{
  --accent:var(--app-green);--accent-dark:var(--app-green-dark);--accent-2:var(--app-orange);
}
/* Lo stesso accorgimento dell'applicazione, per gli stessi motivi. */
.hero-app h1,.hero-app .lead,.hero-app .eyebrow,
.hero-app .hero-meta,.hero-app h2,.hero-app p{
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.hero-app .hero-mark{filter:drop-shadow(0 3px 12px rgba(0,0,0,.5));}

/* Su schermo stretto il testo copre tutta la larghezza, sole compreso:
   la velatura obliqua non basta piu' e torna uniforme. Sull'immagine
   intera la soglia sale — 0.30 da' 4.45, appena sotto il minimo — per
   cui qui si sta su 0.42. */
@media (max-width:860px){
  .hero-app,
  .cta.hero-app{
    background-image:
      linear-gradient(180deg,rgba(10,22,5,.44) 0%,rgba(10,22,5,.38) 45%,rgba(10,22,5,.48) 100%),
      url(../img/vigneto.webp);
  }
}

/* ---- Variante azzurra, per ARVAMIND e ARVASET ----
   Della fotografia originale non esiste una copia senza grado di
   colore. Non serve: il verde di ARVAPP e' un grado che PRESERVA la
   luminanza (a lum 74 corrisponde (53,84,30), che di luminanza ne ha
   73.6), quindi la fotografia vera vive tutta nel canale di luminanza
   e si puo' ritingere. vigneto-blu.webp e' la stessa immagine passata
   per una rampa costruita sulla scala di marca ARVA. Lo script sta in
   tools/build-duotone.py: se un giorno salta fuori l'originale a
   colori, si rigenera da quella.

   La rampa azzurra e' piu' luminosa della verde (massimo 231 contro
   161), quindi qui la velatura deve essere piu' densa: 0.55 e' la
   soglia misurata per AA nella zona di testo, contro lo 0.30 del
   verde. */
.hero-blu,
.cta.hero-blu{
  background-color:#12303f;
  background-image:
    linear-gradient(96deg,
      rgba(10,26,40,.60) 0%,
      rgba(10,26,40,.57) 45%,
      rgba(10,26,40,.55) 65%,
      rgba(10,26,40,.18) 100%),
    url(../img/vigneto-blu.webp);
  background-size:auto,cover;
  background-position:center,center 40%;
  background-repeat:no-repeat,no-repeat;
}
.hero-blu h1,.hero-blu .lead,.hero-blu .eyebrow,
.hero-blu .hero-meta,.hero-blu h2,.hero-blu p{
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.hero-blu .hero-mark{filter:drop-shadow(0 3px 12px rgba(0,0,0,.55));}
@media (max-width:860px){
  .hero-blu,
  .cta.hero-blu{
    background-image:
      linear-gradient(180deg,rgba(10,26,40,.62) 0%,rgba(10,26,40,.58) 45%,rgba(10,26,40,.66) 100%),
      url(../img/vigneto-blu.webp);
  }
}
.hero-app h1{font-family:var(--nunito);}
.hero-app h1 em{color:#8fbd66;}
.hero-app .eyebrow{color:#93a888;font-family:var(--nunito);font-weight:600;}
.hero-app .lead{color:#bcccb2;}
.hero-app .hero-meta .v{color:#93a888;}
.hero-app .hero-mark{height:46px;}
.hero-app .btn{font-family:var(--nunito);font-weight:600;border-radius:12px;}

/* ===================== SEZIONI ===================== */
section{padding:80px 0;}
section.alt{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.sec-head .num{font-family:var(--display);font-weight:800;font-size:13px;color:var(--accent);letter-spacing:.05em;}
section h2{font-size:clamp(26px,4vw,38px);max-width:20ch;}
.sec-lead{margin:16px 0 44px;}

/* Banda tematizzata sul prodotto */
.band-app{
  --accent:var(--app-green);--accent-dark:var(--app-green-dark);
  --accent-2:var(--app-orange);--accent-soft:var(--app-green-50);
}
.band-app h1,.band-app h2,.band-app h3,.band-app h4,.band-app h5{font-family:var(--nunito);}
.band-app .btn,.band-app .badge,.band-app .eyebrow{font-family:var(--nunito);font-weight:600;}
.band-app .btn{border-radius:12px;}

.brand-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;color:#fff;background:var(--accent);
}
.band-app .brand-tag{font-family:var(--nunito);}

/* ===================== BOTTONI ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:14.5px;
  border-radius:10px;padding:12px 22px;border:1px solid transparent;cursor:pointer;
  transition:filter .15s,transform .06s,background .15s;text-align:center;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-dark{background:var(--accent-dark);color:#fff;}
.btn-dark:hover{filter:brightness(1.12);}
.btn-accent{background:var(--accent-2);color:#fff;}
.btn-accent:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-on-dark{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3);}
.btn-on-dark:hover{background:rgba(255,255,255,.18);}
.btn-lg{font-size:16px;padding:15px 30px;}
.btn-block{width:100%;}

/* ===================== GRIGLIE E SCHEDE ===================== */
.grid{display:grid;gap:18px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr;}}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.card h3{font-size:19px;margin-bottom:8px;}
.card h4{font-size:16px;margin-bottom:6px;}
.card p{font-size:14.5px;color:var(--muted);line-height:1.6;}
.card .role{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.card-accent::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c,var(--accent));}
.card-accent{padding-left:28px;}

/* Scheda numerata (funzionalità) */
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;}
.feat .n{
  font-family:var(--display);font-weight:800;font-size:12px;color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;background:var(--accent-soft);margin-bottom:12px;
}
.band-app .feat .n{font-family:var(--nunito);}
.feat h4{font-size:15.5px;margin-bottom:5px;}
.feat p{font-size:14px;color:var(--muted);line-height:1.55;}

/* Scheda dei servizi in home */
.svc{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s;
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.svc .top{height:6px;background:var(--c,var(--accent));}
.svc .in{padding:26px;display:flex;flex-direction:column;flex:1;}
.svc .logo{height:44px;width:auto;margin-bottom:16px;object-fit:contain;object-position:left;}
.svc .role{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.svc p{font-size:14.5px;color:var(--muted);line-height:1.6;}
.svc ul{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:8px;}
.svc ul li{font-size:14px;padding-left:22px;position:relative;color:var(--ink);}
.svc ul li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;background:var(--c,var(--accent));}
.svc .more{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);font-family:var(--display);font-weight:700;font-size:13px;color:var(--c,var(--accent));text-transform:uppercase;letter-spacing:.06em;}

/* Elenco con spunta */
.checks{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px;}
.checks li{position:relative;padding-left:32px;font-size:15px;line-height:1.55;}
.checks li::before{
  content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:6px;
  background:var(--accent-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,linear-gradient(#000,#000);
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background-color:var(--accent);
}
.checks.on-dark li{color:#dce9f2;}
.checks.on-dark li::before{background-color:#7fb4d9;}

/* Elenco puntato semplice */
.dots{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;}
.dots li{position:relative;padding-left:20px;font-size:14.5px;color:var(--muted);line-height:1.55;}
.dots li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent);}

/* ===================== PASSI / TIMELINE ===================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step;}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-top:24px;border-top:3px solid var(--border);}
.step .n{font-family:var(--display);font-weight:800;font-size:13px;color:var(--accent);letter-spacing:.08em;display:block;margin-bottom:8px;}
.band-app .step .n{font-family:var(--nunito);}
.step h4{font-size:16.5px;margin-bottom:8px;}
.step p{font-size:14px;color:var(--muted);line-height:1.55;}
.step.done{border-top-color:var(--accent);}

/* ===================== LIVELLI DECISIONALI ===================== */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:860px){.levels{grid-template-columns:1fr;}}
.level{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px;position:relative;overflow:hidden;}
.level::after{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c,var(--accent));}
.level .h{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:2px;}
.level .when{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.level p{font-size:14.5px;color:var(--muted);line-height:1.6;}
.level .by{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--accent));}

/* ===================== PERSONE =====================
   Le colonne non si dividono lo spazio disponibile: ognuna sta fra
   240 e 300px e si impacchettano a sinistra. Cosi' una sola scheda
   resta una scheda, invece di stirarsi per tutta la larghezza, e
   quando il team cresce si riempiono le colonne senza toccare nulla. */
.team{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,300px));
  justify-content:start;
}
@media (max-width:560px){
  .team{grid-template-columns:1fr;}
}
.person{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.person-photo{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  background:var(--surface-2);border-bottom:1px solid var(--border);
}
.person h3{font-size:18px;margin:20px 22px 0;}
.person-role{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin:7px 22px 0;
}
.person-bio{font-size:14.5px;color:var(--muted);line-height:1.6;margin:12px 22px 22px;}

/* ===================== CITAZIONE / PULL QUOTE ===================== */
.quote{
  border-left:4px solid var(--accent);padding:8px 0 8px 26px;margin:44px 0;
  font-family:var(--display);font-weight:700;font-size:clamp(18px,2.6vw,24px);
  line-height:1.4;color:var(--ink);max-width:44ch;text-wrap:balance;
}
.band-app .quote{font-family:var(--nunito);font-weight:800;}

/* ===================== TABELLE ===================== */
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14.5px;}
thead th{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);
}
tbody td{padding:16px 18px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--muted);line-height:1.55;}
tbody tr:last-child td{border-bottom:none;}
tbody td:first-child{color:var(--ink);font-family:var(--display);font-weight:700;font-size:14px;width:30%;}
.band-app tbody td:first-child{font-family:var(--nunito);font-weight:800;}

/* ===================== PIANI ===================== */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.plans{grid-template-columns:1fr;}}
.plan{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:24px;
}
.plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow);}
.plan .tier{font-family:var(--nunito);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.plan .who{font-family:var(--nunito);font-weight:800;font-size:19px;margin:6px 0 18px;line-height:1.2;}
.plan .lbl{font-family:var(--nunito);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.plan ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);}
.plan ul.mods li{color:var(--ink);}
.plan ul.mods li.plus{color:var(--app-orange);font-weight:600;}
.plan .price{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--border);
  font-family:var(--nunito);font-weight:800;font-size:14px;color:var(--ink);
}
.plan .price small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:3px;}

/* ===================== CTA FINALE ===================== */
.cta{background:var(--hero);color:#eef4f9;position:relative;overflow:hidden;border-top:1px solid var(--border);}
/* Lo sfondo della chiusura di prodotto e' definito insieme a quello
   dell'hero, piu' in alto: la scorciatoia `background:` qui lo
   cancellerebbe, perche' e' una proprieta' abbreviata. */
.cta.hero-app p{color:#cfdcc6;}
.cta .wrap{position:relative;z-index:2;padding:72px 24px;}
.cta h2{color:#fff;font-size:clamp(26px,4vw,38px);max-width:22ch;}
.cta p{color:#a9c2d3;margin-top:16px;max-width:58ch;font-size:17px;}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;}

/* ===================== FORM ===================== */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:700px){.form{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.02em;color:var(--ink);}
.field label .req{color:var(--accent);}
.field input,.field select,.field textarea{
  font-family:var(--body);font-weight:500;font-size:15px;padding:12px 14px;
  border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);
  width:100%;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.55;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}
.field .hint{font-size:12.5px;color:var(--muted);}
.consent{display:flex;gap:12px;align-items:flex-start;grid-column:1/-1;font-size:13.5px;color:var(--muted);line-height:1.5;}
.consent input{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--accent);}
.hp{position:absolute;left:-9999px;}

/* ===================== CONTATTI ===================== */
.contact-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px;}
.contact-list li{border-bottom:1px solid var(--border);padding:16px 0;}
.contact-list li:last-child{border-bottom:none;}
.contact-list .k{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;}
.contact-list .v{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);word-break:break-word;}
.contact-list a.v{color:var(--accent);}

/* ===================== PROSA (legale) ===================== */
.prose{max-width:74ch;}
.prose h2{font-size:24px;margin:44px 0 14px;}
.prose h3{font-size:17px;margin:30px 0 10px;}
.prose p{margin:0 0 16px;color:var(--muted);line-height:1.7;}
.prose ul{margin:0 0 18px;padding-left:22px;color:var(--muted);line-height:1.7;}
.prose li{margin-bottom:7px;}
.prose strong{color:var(--ink);}
.prose .table-scroll{margin:0 0 22px;}
.notice{
  border:1px solid var(--border-strong);border-left:4px solid var(--app-orange);
  background:var(--app-orange-50);border-radius:10px;padding:18px 22px;margin:0 0 30px;
  font-size:14.5px;line-height:1.6;color:var(--ink);
}
.notice strong{display:block;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;color:#9a5c06;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .notice strong{color:#e6a017;}}
:root[data-theme="dark"] .notice strong{color:#e6a017;}

/* ===================== PIÈ DI PAGINA ===================== */
footer.site{background:var(--surface);border-top:1px solid var(--border);padding:56px 0 32px;font-size:14px;color:var(--muted);}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px;}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid img.mark{height:52px;width:auto;margin-bottom:16px;}
.foot-grid p{font-size:13.5px;line-height:1.6;max-width:34ch;}
.foot-h{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;}
.foot-links{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px;}
.foot-links a{color:var(--muted);font-size:14px;}
.foot-links a:hover{color:var(--accent);}
.foot-bot{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;
}
.foot-bot .legal{display:flex;gap:18px;flex-wrap:wrap;}

/* ===================== UTILITÀ ===================== */
.mt-0{margin-top:0;}
.mt-s{margin-top:14px;}
.mt-m{margin-top:28px;}
.mt-l{margin-top:48px;}
.center{text-align:center;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px;}}
.split-wide{grid-template-columns:1.15fr .85fr;}
@media (max-width:860px){.split-wide{grid-template-columns:1fr;}}