/* =========================================================
   Catenaria — Marketing Automation per la ristorazione
   Landing page Pienissimo Pro.
   Stessa base del design system originale (mappato da Tailwind).
   Ogni valore è mappato dalla classe Tailwind originale.
   Base: 1rem = 16px. Breakpoint: sm=640px, lg=1024px.
   ========================================================= */

:root {
  /* slate */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-900:#0f172a; --slate-950:#020617;
  /* azzurro (base #2071b8) — ex indigo/violet, ora tonalità di azzurro */
  --indigo-50:#eaf3fb; --indigo-100:#d4e6f6; --indigo-200:#a9cdee;
  /* accents */
  --rose-50:#fff1f2; --rose-200:#fecdd3; --rose-500:#f43f5e; --rose-600:#e11d48;
  --orange-500:#f97316; --amber-500:#f59e0b; --emerald-500:#10b981; --pink-500:#ec4899;
  --blue-500:#2071b8; --cyan-500:#45a3e3; --teal-500:#14b8a6;
  --indigo-500:#2071b8; --violet-500:#45a3e3;

  --maxw: 1280px;                 /* max-w-7xl */
  --grad-azz: linear-gradient(120deg, #155d9b 0%, #2071b8 48%, #45a3e3 100%);   /* gradiente di azzurri */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--slate-600); background: #fff; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { color: var(--slate-900); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }  /* px-6 */
@media (min-width: 640px) { .wrap { padding: 0 32px; } }                          /* sm:px-8 */

/* Gradient-text helpers */
.tx-indigo { background: var(--grad-azz);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tx-rose { background: linear-gradient(to right, var(--rose-500), var(--orange-500));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ============ SECTIONS ============ */
.sec { position: relative; overflow: hidden; padding: 64px 0; }                  /* py-16 */
@media (min-width: 640px) { .sec { padding: 80px 0; } }                          /* sm:py-20 */
.sec > .wrap { position: relative; z-index: 10; }

/* alternating gradient backgrounds (bg-gradient-to-b) */

.bg-prob  { background: linear-gradient(to bottom, var(--violet-50), rgba(234,243,251,.5) 50%, var(--slate-100)); }
.bg-sol   { background: linear-gradient(to bottom, var(--slate-100), rgba(234,243,251,.6) 50%, var(--violet-50)); }
.bg-voce  { background: linear-gradient(to bottom, var(--violet-50), rgba(234,243,251,.5) 50%, var(--slate-100)); }
.bg-bio   { background: linear-gradient(to bottom, var(--violet-50), rgba(234,243,251,.5) 50%, var(--violet-50)); }
.bg-rep   { background: linear-gradient(to bottom, var(--slate-100), rgba(234,243,251,.6) 50%, var(--violet-50)); }
.bg-testi { background: linear-gradient(to bottom, var(--violet-50), var(--slate-100) 50%, var(--indigo-50)); }
.bg-cta   { background: var(--slate-950); }

/* decorative blurred orbs */
.orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 50%; }

.orb-b { right: -80px; top: 80px; width: 400px; height: 400px; background: rgba(188,220,242,.5); filter: blur(100px); }
.orb-c { right: -160px; top: 80px; width: 500px; height: 500px; background: rgba(169,205,238,.6); filter: blur(120px); }
.orb-d { left: -80px; bottom: 0; width: 400px; height: 400px; background: rgba(188,220,242,.5); filter: blur(100px); }
.orb-e { left: -80px; top: 40px; width: 400px; height: 400px; background: rgba(169,205,238,.5); filter: blur(120px); }

/* ============ SECTION HEADER ============ */
.sechead { max-width: 896px; margin: 0 auto; text-align: center; }               /* max-w-4xl */
                                           /* max-w-3xl */
.sechead h2 { font-size: 24px; line-height: 1.15; }                              /* text-2xl */
@media (min-width: 640px) { .sechead h2 { font-size: 30px; } }                   /* sm:text-3xl */
@media (min-width: 1024px) { .sechead h2 { font-size: 44px; line-height: 1.25; } } /* lg:text-[2.75rem] leading-tight */
@media (min-width: 640px) { .sechead--xl h2 { font-size: 36px; } }               /* sm:text-4xl */
@media (min-width: 1024px) { .sechead--xl h2 { font-size: 48px; line-height: 1.1; } } /* lg:text-5xl */
.sechead__p { margin-top: 16px; font-size: 18px; color: var(--slate-600); }      /* mt-4 text-lg */
@media (min-width: 1024px) { .sechead__p--nowrap { white-space: nowrap; } }       /* una sola riga su desktop */

.secbadge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 6px 16px; border-radius: 9999px;                                      /* px-4 py-1.5 */
  font-size: 14px; font-weight: 500; border: 1px solid;                          /* text-sm font-medium */
}
.secbadge svg { width: 16px; height: 16px; }
.secbadge--rose { border-color: var(--rose-200); background: var(--rose-50); color: var(--rose-600); }
.secbadge--indigo { border-color: var(--indigo-200); background: var(--indigo-50); color: var(--indigo-600); }

/* ============ CARDS ============ */
.cardgrid { margin-top: 64px; display: grid; gap: 24px; grid-template-columns: 1fr; } /* mt-16 gap-6 */
@media (min-width: 640px) { .cardgrid { margin-top: 80px; grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) {
  .cardgrid.cols-3 { grid-template-columns: repeat(3,1fr); }
  .cardgrid.cols-4 { grid-template-columns: repeat(4,1fr); }
}
/* ============ CHAIN — Esempi di Catenarie ============
   Timeline verticale: al posto dei box, una linea continua collega i tre
   nodi. Spezza il ritmo dei riquadri delle sezioni precedenti e da mobile
   resta leggerissima (nessun bordo, nessun fondo).
   ============================================================ */
.chain { list-style: none; max-width: 760px; margin: 64px auto 0; position: relative; } /* mt-16 */
@media (min-width: 640px) { .chain { margin-top: 80px; } }
.chain__item { position: relative; display: flex; gap: 22px; padding-bottom: 40px; }
.chain__item:last-child { padding-bottom: 0; }
/* il segmento di "catena" che scende verso il nodo successivo: sta su ogni
   item (non sulla lista) così compare insieme al suo blocco nel reveal. */
.chain__item::before {
  content: ""; position: absolute; left: 27px; top: 62px; bottom: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c, var(--indigo-500)) 45%, transparent), color-mix(in srgb, var(--c, var(--indigo-500)) 22%, transparent));
}
.chain__item:last-child::before { display: none; }
.chain__node {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; position: relative; z-index: 2;
  display: grid; place-items: center; background: #fff; color: var(--c, var(--indigo-500));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--indigo-500)) 30%, transparent),
              0 8px 20px -8px color-mix(in srgb, var(--c, var(--indigo-500)) 60%, transparent);
  transition: transform .3s ease, box-shadow .3s ease;
}
.chain__item:hover .chain__node {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--indigo-500)) 55%, transparent),
              0 14px 26px -10px color-mix(in srgb, var(--c, var(--indigo-500)) 70%, transparent);
}
.chain__node svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chain__txt { min-width: 0; padding-top: 8px; }
.chain__step {
  display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--c, var(--indigo-500));
}
.chain__txt h3 { font-size: 21px; font-weight: 700; color: var(--slate-900); }
.chain__txt p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--slate-600); }
@media (max-width: 639px) {
  .chain { margin-top: 48px; }
  .chain__item { gap: 16px; padding-bottom: 30px; }
  .chain__item::before { left: 20px; top: 48px; }
  .chain__node { width: 42px; height: 42px; }
  .chain__node svg { width: 20px; height: 20px; }
  .chain__txt { padding-top: 2px; }
  .chain__txt h3 { font-size: 18px; }
  .chain__txt p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .chain__node, .chain__item:hover .chain__node { transition: none; transform: none; }
}

.card {
  position: relative; overflow: hidden;
  border-radius: 16px; border: 1px solid rgba(226,232,240,.8);                   /* rounded-2xl border-slate-200/80 */
  background: rgba(255,255,255,.7); backdrop-filter: blur(4px);                  /* bg-white/70 backdrop-blur-sm */
  padding: 24px; transition: transform .3s ease, box-shadow .3s ease;           /* p-6 */
}
.card--lg { padding: 32px; }                                                     /* p-8 */
.cardgrid .card:hover { transform: translateY(-6px);                             /* leggero sollevamento (specificità > .reveal.in) */
  box-shadow: 0 18px 32px -10px color-mix(in srgb, var(--c, var(--indigo-500)) 45%, transparent); } /* ombra in tema col colore del box */
.card__bar {
  position: absolute; left: 24px; right: 24px; top: 0; height: 2px;              /* h-0.5 left-6 right-6 */
  border-radius: 9999px; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(to right, var(--c, var(--indigo-500)), var(--c2, var(--violet-500)));
}
.card--lg .card__bar { left: 32px; right: 32px; }
.card:hover .card__bar { opacity: 1; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px;          /* h-12 w-12 rounded-xl mb-4 */
  background: color-mix(in srgb, var(--c, var(--indigo-500)) 10%, transparent);
  color: var(--c, var(--indigo-500));
}
.card--lg .card__icon { margin-bottom: 20px; }                                   /* mb-5 */
.card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 18px; font-weight: 700; color: var(--slate-900); }         /* text-lg */
.card--lg h3 { font-size: 20px; }                                                /* text-xl */
.card p { margin-top: 8px; font-size: 14px; color: var(--slate-600); line-height: 1.55; } /* mt-2 text-sm */
.card--lg p { margin-top: 12px; font-size: 15px; }                               /* mt-3 text-[15px] */

/* nota rassicurazione sotto la griglia soluzione */

/* color tokens per card */
.c-rose   { --c: var(--rose-500);    --c2: var(--orange-500); }
.c-blue   { --c: var(--blue-500);    --c2: var(--cyan-500); }
.c-emerald{ --c: var(--emerald-500); --c2: var(--teal-500); }
.c-violet { --c: var(--cyan-500);    --c2: #0891b2; }                             /* ciano */
.c-amber  { --c: var(--amber-500);   --c2: #eab308; }
.c-indigo { --c: var(--rose-500);    --c2: #fb7185; }                             /* rosso/rosa */
.c-pink   { --c: var(--pink-500);    --c2: #f472b6; }                             /* fucsia */

/* ============ BUTTONS ============ */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 9999px; border: 0; cursor: pointer;
  background: var(--grad-azz);
  color: #fff; font-weight: 600; font-size: 14px; padding: 14px 24px;            /* py-3.5 px-6 text-sm */
  box-shadow: 0 10px 15px -3px rgba(32,113,184,.25), 0 4px 6px -4px rgba(32,113,184,.25);
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 640px) { .btn-cta { font-size: 16px; padding: 16px 32px; } }  /* sm:py-4 sm:px-8 sm:text-base */
.btn-cta:hover { box-shadow: 0 20px 25px -5px rgba(32,113,184,.3), 0 8px 10px -6px rgba(32,113,184,.3); }
.btn-cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.btn-cta:hover svg { transform: translateX(4px); }

.btn-orange {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px;
  background: linear-gradient(to right, var(--orange-500), var(--amber-500));
  color: #fff; font-weight: 600; font-size: 16px; padding: 16px 32px;            /* px-8 py-4 text-base */
  box-shadow: 0 10px 15px -3px rgba(249,115,22,.25), 0 4px 6px -4px rgba(249,115,22,.25);
  transition: box-shadow .2s ease;
}
.btn-orange:hover { box-shadow: 0 20px 25px -5px rgba(249,115,22,.3), 0 8px 10px -6px rgba(249,115,22,.3); }
.btn-orange svg { width: 16px; height: 16px; transition: transform .2s ease; }
.btn-orange:hover svg { transform: translateX(4px); }

/* ============ HEADER FISSO ============ */
/* Altezza nav = padding (24+24) + altezza logo. Serve a compensare lo spazio
   che l'header non occupa piu' nel flusso e a posizionare le ancore (#demo, ...). */
:root { --nav-h: 88px; }
@media (max-width: 639px) { :root { --nav-h: 76px; } }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
/* Appena si scrolla il fondo diventa pieno, cosi' logo e bottone restano leggibili
   sopra qualunque sezione. */
.site-header.is-scrolled {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(15,23,42,.08), 0 8px 24px -12px rgba(15,23,42,.25);
}
.site-header .nav__inner { min-height: 40px; }
.nav__logo-link { display: inline-flex; align-items: center; }

/* Le ancore non finiscono sotto l'header */
html { scroll-padding-top: calc(var(--nav-h) + 8px); }

/* ============ HERO ============ */
.nav { padding: 24px 0; }                                                        /* py-6 */
.nav__inner { display: flex; align-items: center; justify-content: space-between; }
.nav__logo { height: 32px; width: auto; }                                        /* h-8 */
@media (min-width: 640px) { .nav__logo { height: 40px; } }                       /* sm:h-10 */
.nav__btn {
  display: inline-flex; border-radius: 9999px; background: #16a34a;              /* verde */
  color: #fff; font-weight: 600; font-size: 12px; padding: 8px 16px;             /* px-4 py-2 text-xs */
  transition: background .2s ease;
}
@media (min-width: 640px) { .nav__btn { font-size: 14px; padding: 10px 20px; } } /* sm:px-5 sm:py-2.5 sm:text-sm */
.nav__btn:hover { background: #15803d; }

/* variante verde del CTA (es. invio form) */

.hero__content { padding: 24px 0 80px; }                                         /* pt-6 pb-20 */
@media (min-width: 640px) { .hero__content { padding-top: 40px; } }              /* sm:pt-10 */
/* l'header e' fuori dal flusso: la hero recupera lo spazio che occupava */
.hero-photo-sec { padding-top: var(--nav-h); }
@media (min-width: 1024px) { .hero__content { padding-bottom: 112px; } }         /* lg:pb-28 */
/* ripristina il padding laterale su mobile/tablet (il desktop ≥1024px resta invariato) */
@media (max-width: 1023px) { .nav, .hero__content { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 640px) and (max-width: 1023px) { .nav, .hero__content { padding-left: 32px; padding-right: 32px; } }

/* ===== Hero con foto di sfondo ===== */
.hero-photo-sec {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 640px; background: var(--slate-900);
}
/* L'altezza segue il rapporto della foto (1672x941 = 56.3%): cosi' su desktop la si vede
   quasi per intero invece di ritagliarla sopra e sotto. Il tetto a 90vh lascia comunque
   intravedere la sezione successiva. */
@media (min-width: 1024px) { .hero-photo-sec { min-height: max(620px, min(56.3vw, 90vh)); } }

.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 48%;
  animation: hero-zoom 9s ease-out both;
}
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-photo { animation: none; } }
/* Mobile: nessuno zoom aggiuntivo, inquadratura sul portatile con la Catenaria
   che resta intero in basso a destra, sotto il blocco di testo. */
@media (max-width: 1023px) {
  .hero-photo {
    animation: none;
    object-position: 79% 70%;
  }
}

/* Velo chiaro da sinistra: il testo resta leggibile, la foto respira a destra */
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.92) 38%, rgba(255,255,255,.40) 70%, rgba(255,255,255,0) 100%);
}
@media (max-width: 1023px) {
  .hero-overlay { background: linear-gradient(to right, #fff, rgba(255,255,255,.90) 50%, rgba(255,255,255,.52)); }
}
/* Scrim extra di leggibilità solo su mobile */
.hero-scrim-mobile { position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.22); }
@media (min-width: 1024px) { .hero-scrim-mobile { display: none; } }
/* Banda chiara in alto per staccare la nav dalla foto */
.hero-topband {
  position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: 144px;
  background: linear-gradient(to bottom, #fff, rgba(255,255,255,.7) 55%, rgba(255,255,255,0));
}
@media (max-width: 1023px) {
  .hero-topband { height: 120px; background: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,.22) 55%, rgba(255,255,255,0)); }
}

/* La colonna di testo occupa lo spazio centrale verticalmente */
.hero-photo-sec .hero__content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.hero__col { max-width: 640px; }
/* su desktop il titolo resta sulle due righe volute: la colonna si allarga solo
   per l'h1, mentre testo e sottotesto restano sulla misura di lettura */
@media (min-width: 1024px) {
  .hero-photo-sec .hero__col { max-width: 880px; }
  .hero-photo-sec .hero__col h1 span { white-space: nowrap; }
  .hero-photo-sec .hero__lead,
.hero-photo-sec .hero__cta { max-width: 640px; }
}

 /* gap-12 */
 /* lg:grid-cols-2 lg:gap-16 */
.hero h1 { font-size: 30px; line-height: 1.15; }                                 /* text-3xl */
/* su mobile/tablet le righe del titolo vengono bilanciate, cosi' non resta
   una parola isolata a fine riga */
@media (max-width: 1023px) { .hero h1 { text-wrap: balance; } }
@media (min-width: 640px) { .hero h1 { font-size: 36px; } }                      /* sm:text-4xl */
@media (min-width: 1024px) { .hero h1 { font-size: 48px; } }                     /* lg:text-5xl */
.hero__lead { margin-top: 20px; font-size: 16px; line-height: 1.625; color: var(--slate-600); } /* mt-5 text-base leading-relaxed */
@media (min-width: 640px) { .hero__lead { margin-top: 24px; font-size: 18px; } } /* sm:mt-6 sm:text-lg */
        /* mt-2 text-sm slate-500 */
  /* sm:mt-3 sm:text-base */
.hero__cta { margin-top: 32px; }                                                 /* mt-8 */

                            /* drop-shadow-2xl */

/* Placeholder video nell'hero (verticale 9:16) */

/* Telefono hero ricostruito in CSS (schermata Voice Pro) — non più usato */

.checklist { margin-top: 32px; display: grid; gap: 16px; list-style: none; }     /* mt-8 space-y-4 */
.checklist li { display: flex; align-items: flex-start; gap: 12px; }             /* gap-3 */
.checklist__ic {
  margin-top: 4px; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; /* h-6 w-6 */
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo-100); color: var(--indigo-600);
}
.checklist__ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.checklist span.t { color: var(--slate-700); font-size: 16px; line-height: 1.5; }
.checklist strong { color: var(--slate-900); font-weight: 600; }

/* ============ BIO — replica esatta (Tailwind 1:1) ============ */

.bio__head { text-align: center; max-width: 896px; margin: 0 auto 64px; }        /* max-w-4xl mb-16 */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 16px; font-weight: 600;                          /* text-xs font-semibold */
  color: var(--indigo-700); background: var(--indigo-100);                       /* bg-indigo-100 */
  padding: 6px 16px; border-radius: 9999px;
}
.badge svg { width: 14px; height: 14px; color: currentColor; fill: none; stroke: currentColor; stroke-width: 2; }
.bio__head h2 { margin-top: 16px; font-size: 24px; line-height: 1.15; }
.bio__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }

.bio__video { width: 100%; }

.bio__video iframe, .bio__video video {
  width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; border-radius: 16px; box-shadow: var(--shadow-xl); }

.bio__info h3 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--slate-900); }
.bio__list { list-style: none; margin-top: 20px; display: grid; gap: 16px;
  font-size: 16px; line-height: 1.625; color: var(--slate-600); }
.bio__list li { position: relative; padding-left: 20px; }
.bio__list li::before { content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--indigo-500); }
.bio__list strong { font-weight: 600; color: var(--slate-900); }
.bio__foot { text-align: center; max-width: 768px; margin: 56px auto 0;
  font-size: 18px; line-height: 1.625; color: var(--slate-600); }

@media (min-width: 640px) {
  .bio__head h2 { font-size: 36px; }
  .bio__info h3 { font-size: 24px; line-height: 32px; }
  .bio__list { font-size: 18px; }
  .bio__foot { font-size: 20px; }
}
@media (min-width: 1024px) {
  .bio__head h2 { font-size: 48px; line-height: 1; white-space: nowrap; }
  .bio__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}

/* ============ TESTIMONIALS ============ */
.testi-grid { margin-top: 64px; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .testi-grid { margin-top: 80px; grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .testi-grid { grid-template-columns: repeat(3,1fr); } }
.testi-card {
  overflow: hidden; border-radius: 16px; border: 1px solid rgba(226,232,240,.8);
  background: rgba(255,255,255,.7); backdrop-filter: blur(4px); box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.testi-grid .testi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.testi-card img { width: 100%; display: block; }
/* placeholder video 16:9 (sostituibile con iframe/video reale) */

.testi-card iframe, .testi-card video { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }
.testi-btn-wrap { margin-top: 48px; text-align: center; }                        /* mt-12 */

/* ============ CTA (dark) + FORM ============ */
.cta__inner { max-width: 1024px; margin: 0 auto; text-align: center; }           /* max-w-5xl */
.cta__eyebrow { margin-bottom: 16px; font-size: 16px; font-weight: 500; line-height: 1.625; color: var(--slate-400); }
.cta__eyebrow b { color: #fff; font-weight: 500; }
.cta h2 { color: #fff; font-size: 24px; }
@media (min-width: 640px) { .cta h2 { font-size: 36px; } }
@media (min-width: 1024px) { .cta h2 { font-size: 48px; line-height: 1.1; } }
.cta__sub { margin: 24px auto 0; max-width: 672px; font-size: 18px; line-height: 1.625; color: var(--slate-300); } /* mt-6 max-w-2xl text-lg */
@media (min-width: 640px) { .cta__sub { font-size: 20px; } }                     /* sm:text-xl */
.cta__sub strong { color: #fff; font-weight: 600; }
/* interruzione di riga che vale solo su mobile */
.brk-m { display: none; }
@media (max-width: 639px) { .brk-m { display: inline; } }
/* su mobile il titolo deve staccare da occhiello e sottotesto: piu' grande lui,
   piu' piccoli loro, con un po' d'aria in mezzo */
@media (max-width: 639px) {
  .cta__eyebrow { margin-bottom: 14px; font-size: 14px; }
  .cta h2 { font-size: 29px; line-height: 1.18; text-wrap: balance; }
  .cta__sub { margin-top: 18px; font-size: 16px; }
}

/* ===== Form Zoho =====
   Il wrapper fa da "finestra" sul form: ritaglia il bianco che Zoho lascia in cima e
   in fondo al proprio documento, cosi' il riquadro bianco inizia poco sopra al primo
   campo e finisce poco sotto al pulsante.
   --zf-h    = altezza reale del documento del form, comunicata da Zoho via postMessage
               (il valore qui sotto e' solo il ripiego prima del caricamento).
   --zf-crop = bianco da tagliare in cima.
   --zf-cut  = bianco da tagliare in fondo, sotto al pulsante.
   --zf-tail = respiro bianco che vogliamo comunque lasciare sotto al pulsante.
   Se un giorno cambiano i campi del form, sono questi i valori da ritoccare. */
.zoho-form-wrap {
  --zf-h: 1100px;
  --zf-crop: 85px;
  --zf-cut: 70px;
  --zf-tail: 24px;
  display: block;
  position: relative;
  margin: 32px auto 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;                /* sfondo bianco anche prima del caricamento */
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  height: calc(var(--zf-h) - var(--zf-crop) - var(--zf-cut) + var(--zf-tail));
  transition: height .3s ease;
}
.zoho-form {
  display: block;
  width: 100%;
  height: var(--zf-h);
  margin: calc(var(--zf-crop) * -1) 0 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
/* su mobile il form e' a colonna singola: niente coda da tagliare in fondo */
@media (max-width: 768px) {
  .zoho-form-wrap { --zf-h: 1110px; --zf-crop: 90px; --zf-cut: 0px; --zf-tail: 8px; }
}
/* schermi molto stretti: le etichette vanno a capo e il form si allunga */
@media (max-width: 359px) {
  .zoho-form-wrap { --zf-h: 1200px; }
}

/* input wrapper con icona */

                                             /* spazio per l'icona */

/* checkbox */

/* links + nota */

/* ============ FOOTER ============ */
.footer { background: var(--slate-950); padding: 28px 0; border-top: 1px solid rgba(255,255,255,.06); }
.footer__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
@media (min-width: 640px) { .footer__inner { padding: 0 40px; } }
.footer__brand { display: inline-flex; }
.footer__brand img { height: 44px; width: auto; display: block; }
.footer__meta { text-align: right; font-size: 13px; line-height: 1.7; color: var(--slate-400); }
.footer__company { margin: 0; }
.footer__links { margin: 4px 0 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.footer__links a { color: var(--slate-400); text-decoration: none; transition: color .2s ease; }
.footer__links a:hover { color: #fff; }
.footer__links span { color: var(--slate-600); }
.footer__ai { margin: 4px 0 0; font-size: 12px; color: var(--slate-500); }
@media (max-width: 640px) {
  .footer__inner { flex-direction: column; text-align: center; gap: 18px; }
  .footer__brand img { height: 38px; margin: 0 auto; }
  .footer__meta { text-align: center; }
  .footer__links { justify-content: center; }
  /* l'indirizzo resta su una riga sola: si rimpicciolisce quanto serve per stare nello schermo */
  .footer__company { white-space: nowrap; font-size: min(13px, 2.9vw); }
}

/* ============ FAQ (accordion nativo <details>) ============ */
.faq { margin: 56px auto 0; max-width: 860px; display: grid; gap: 14px; }
.faq__item {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq__item:hover { border-color: var(--indigo-200); }
.faq__item[open] { border-color: var(--indigo-200); box-shadow: 0 16px 30px -20px rgba(32,113,184,.55); }
.faq__q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 20px 58px 20px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.45;
}
.faq__q::-webkit-details-marker { display: none; }        /* nasconde il triangolino di Safari */
.faq__q::after {
  /* chevron che ruota all'apertura */
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--indigo-600, var(--indigo-500));
  border-bottom: 2.5px solid var(--indigo-600, var(--indigo-500));
  transform: translateY(-70%) rotate(45deg);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.faq__item[open] .faq__q::after { transform: translateY(-25%) rotate(-135deg); }
.faq__q:focus-visible { outline: 2px solid var(--indigo-600, var(--indigo-500)); outline-offset: 2px; border-radius: 16px; }
.faq__panel { overflow: hidden; }                          /* l'altezza viene animata via JS */
.faq__a { padding: 0 26px 22px 24px; font-size: 15px; line-height: 1.65; color: var(--slate-600); }
.faq__a strong { color: var(--slate-900); font-weight: 700; }
.faq__link {
  color: var(--indigo-600, var(--indigo-500));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq__link:hover { color: var(--indigo-700, #195a93); }
@media (max-width: 639px) {
  .faq__q { font-size: 15px; padding: 18px 50px 18px 18px; }
  .faq__q::after { right: 20px; }
  .faq__a { padding: 0 20px 20px 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============ RESPONSIVE EXTRAS ============ */
@media (max-width: 639px) {
  .nav__logo { height: 28px; }
}

/* =========================================================
   CATENARIA — componenti specifici della landing
   ========================================================= */

/* ============ MOCKUP: costruttore di workflow Catenaria ============ */
/* Riproduzione della schermata "Costruisci Workflow" di Pienissimo Pro.
   La tela ha rapporto fisso 931x511: nodi, porte e connettori sono posizionati
   sulle stesse coordinate, cosi' restano allineati a qualsiasi dimensione. */
/* Il guscio porta cornice, angoli e ombra: stando fuori dal contenitore che scorre,
   l'ombra non viene piu' ritagliata (era l'origine degli angoli grigi in basso). */
.cat-ui-shell {
  margin: 56px auto 0; max-width: 940px;
  border-radius: 16px; border: 1px solid rgba(226,232,240,.9);
  background: #fff; box-shadow: var(--shadow-2xl); overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
@media (min-width: 640px) { .cat-ui-shell { margin-top: 72px; } }
.cat-ui-shell:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px -10px rgba(47,134,204,.45);
  box-shadow: 0 18px 32px -10px color-mix(in srgb, var(--indigo-500) 45%, transparent);
}
.cat-ui-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* niente barra di scorrimento visibile: su desktop non serve, su mobile si trascina */
  scrollbar-width: none; -ms-overflow-style: none;
}
.cat-ui-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; }
.cat-ui { min-width: 880px; container-type: inline-size; background: #fff; }
.cat-ui-hint { margin-top: 14px; text-align: center; font-size: 13px; color: var(--slate-400); }
@media (min-width: 1000px) { .cat-ui-hint { display: none; } }

/* intestazione con il marchio */
/* lo sfondo combacia con quello del file del logo, cosi' non si vede lo stacco */
.cat-ui__brandbar { padding: 14px 0; background: #f8f8f8; border-bottom: 1px solid var(--slate-200); }
.cat-ui__logo { height: 28px; height: 3.1cqw; width: auto; margin: 0 auto; }

/* barra delle sezioni */
.cat-ui__tabs { display: flex; border-bottom: 1px solid var(--slate-200); background: #fff; }
.cat-ui__tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 8px; font-size: 12px; font-size: 1.38cqw; color: #46525f; white-space: nowrap;
}
.cat-ui__tab svg { width: 13px; height: 13px; width: 1.5cqw; height: 1.5cqw; flex: 0 0 auto; }
.cat-ui__tab.is-on { color: #2b6cb0; box-shadow: inset 0 3px 0 #2b4f8e; }

.cat-ui__body { display: grid; grid-template-columns: 17% 1fr; gap: 12px; padding: 12px; }

/* palette dei blocchi trascinabili */
.cat-ui__palette { display: grid; grid-template-rows: repeat(9, 1fr); gap: 4px; }
.cat-blk {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #dfe4ea; border-radius: 4px; background: #fff;
}
.cat-blk__bar { height: 9px; flex: 0 0 auto; background: var(--b); }
.cat-blk__in { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 10.5px; font-size: 1.2cqw; color: #3c4653; }
.cat-blk__in svg { width: 11px; height: 11px; width: 1.35cqw; height: 1.35cqw; flex: 0 0 auto; color: #5b6876; }
.cat-blk__in b { font-weight: 500; }

/* tela */
.cat-ui__canvas {
  position: relative; aspect-ratio: 931 / 511;
  border: 1px solid #dfe4ea; background-color: #fff;
  background-image:
    linear-gradient(rgba(148,163,184,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.20) 1px, transparent 1px);
  background-size: 1.934% 3.523%;
}
.cat-ui__zoom { position: absolute; top: 1.6%; right: 1.4%; display: inline-flex; gap: 6px; color: #6b7887; z-index: 3; }
.cat-ui__zoom svg { width: 15px; height: 15px; width: 1.7cqw; height: 1.7cqw; }
.cat-ui__links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* nodi */
.cat-nd {
  position: absolute; z-index: 2; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #cfd6de; border-radius: 5px; background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.10);
}
.cat-nd__bar { height: 18%; min-height: 7px; flex: 0 0 auto; background: var(--b); }
.cat-nd__in { flex: 1; display: flex; align-items: center; gap: 4px; padding: 0 7px; font-size: 9px; font-size: .97cqw; color: #38424e; }
.cat-nd__in svg { width: 10px; height: 10px; width: 1.2cqw; height: 1.2cqw; flex: 0 0 auto; color: #5b6876; }
.cat-nd__in b { font-weight: 500; }
.cat-nd__in i { font-style: normal; font-size: 7px; font-size: .74cqw; color: #93a0ad; }
.cat-nd__o {
  position: absolute; right: 8px; transform: translateY(-50%);
  text-align: right; font-style: normal;
  font-size: 6px; font-size: .68cqw; line-height: 1.15; color: #93a0ad;
}
/* i nodi con piu' uscite riservano la meta' destra alle etichette, come nella piattaforma */
.cat-nd--o2 .cat-nd__in { padding-right: 24%; font-size: 7.9px; font-size: .84cqw; }
.cat-nd--o2 .cat-nd__o { max-width: 22%; }
.cat-nd--o3 .cat-nd__in { padding-right: 42%; font-size: 7.9px; font-size: .84cqw; }
.cat-nd--o3 .cat-nd__o { max-width: 40%; font-size: 6.2px; font-size: .66cqw; }
/* nodo "Note": il riquadro di testo occupa il corpo della card */
.cat-nd--note { background: #fdf9e3; border-color: #e3dcae; }
.cat-nd--note .cat-nd__bar { height: 9%; min-height: 6px; }
.cat-nd--note .cat-nd__in { flex: 0 0 auto; padding-top: 8px; padding-bottom: 4px; }
.cat-nd__pad { flex: 1; margin: 0 9px 9px; border: 1px solid #e3dcae; border-radius: 3px; background: #fefcf1; }

/* ---- Il mockup su mobile ----
   Sotto i 768px la schermata rientra tutta nella larghezza invece di scorrere in
   orizzontale: i valori fissi in px diventano proporzionali (cqw), cosi' la
   riproduzione si rimpicciolisce mantenendo esattamente le stesse proporzioni. */
@media (max-width: 767px) {
  .cat-ui { min-width: 0; }
  .cat-ui-hint { display: none; }
  .cat-ui-shell { border-radius: 12px; margin-top: 40px; }
  .cat-ui__brandbar { padding: 1.6cqw 0; }
  .cat-ui__tab { padding: 1.36cqw .9cqw; gap: .8cqw; }
  .cat-ui__body { gap: 1.36cqw; padding: 1.36cqw; }
  .cat-ui__palette { gap: .32cqw; }
  .cat-blk { border-radius: .45cqw; }
  .cat-blk__bar { height: 1.02cqw; }
  .cat-blk__in { padding: 0 .9cqw; gap: .68cqw; }
  .cat-nd { border-radius: .57cqw; }
  .cat-nd__bar { min-height: 0; }
  .cat-nd__in { padding: 0 .8cqw; gap: .45cqw; }
  .cat-nd__o { right: .9cqw; }
  .cat-nd--note .cat-nd__bar { min-height: 0; }
  .cat-nd--note .cat-nd__in { padding-top: .9cqw; padding-bottom: .45cqw; }
  .cat-nd__pad { margin: 0 1cqw 1cqw; border-radius: .34cqw; }

  /* a workflow completato la palette dei blocchi si richiude verso sinistra e la
     tela si allarga: sullo schermo piccolo i nodi diventano cosi' piu' grandi */
  .cat-ui__body { display: flex; align-items: stretch; }
  .cat-ui__palette {
    flex: 0 0 17%; overflow: hidden;
    transition: flex-basis .7s cubic-bezier(.4,0,.2,1) 2.5s,
                opacity .45s ease 2.5s,
                margin-right .7s cubic-bezier(.4,0,.2,1) 2.5s;
  }
  .cat-ui__canvas { flex: 1 1 auto; min-width: 0; }
  .cat-ui-shell.in .cat-ui__palette { flex-basis: 0; opacity: 0; margin-right: -1.36cqw; }
  /* con la tela piu' larga i nodi crescono: le etichette possono crescere con loro */
  .cat-nd__in, .cat-nd--o2 .cat-nd__in, .cat-nd--o3 .cat-nd__in, .cat-nd__o, .cat-nd__in i {
    transition: font-size .7s cubic-bezier(.4,0,.2,1) 2.5s;
  }
  .cat-ui-shell.in .cat-nd__in { font-size: 1.17cqw; }
  .cat-ui-shell.in .cat-nd--o2 .cat-nd__in,
  .cat-ui-shell.in .cat-nd--o3 .cat-nd__in { font-size: 1.01cqw; }
  .cat-ui-shell.in .cat-nd__o { font-size: .82cqw; }
  .cat-ui-shell.in .cat-nd--o3 .cat-nd__o { font-size: .79cqw; }
  .cat-ui-shell.in .cat-nd__in i { font-size: .89cqw; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  /* chi preferisce meno movimento vede la schermata cosi' com'e', palette inclusa */
  .cat-ui__palette, .cat-ui-shell.in .cat-ui__palette {
    transition: none; flex-basis: 17%; opacity: 1; margin-right: 0;
  }
}

/* elenco dei punti sotto al mockup */
.checklist--cols { margin-top: 48px; }
@media (min-width: 768px) { .checklist--cols { grid-template-columns: repeat(2, 1fr); gap: 22px 40px; } }
@media (min-width: 1024px) { .checklist--cols { grid-template-columns: repeat(2, 1fr); gap: 28px 48px; max-width: 980px; margin-left: auto; margin-right: auto; } }
.checklist--cols li { align-items: flex-start; }
.checklist--cols span.t { font-size: 15px; }

/* --- Animazione d'ingresso: i blocchi arrivano dalla palette e si collegano ---
   Parte una sola volta, quando la sezione entra in vista (classe .in gia' usata dal
   resto della pagina). Anima solo transform/opacity e un tracciato SVG: nessuna
   libreria, nessun ciclo continuo. */
.cat-ui-shell.in .cat-nd {
  animation: cat-nd-in .82s cubic-bezier(.22,.8,.22,1) both;
  animation-delay: var(--d, 0s);
}
@keyframes cat-nd-in {
  from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.94); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
.cat-lk { stroke-dasharray: 1; }
.cat-ui-shell.in .cat-lk { animation: cat-lk-draw .68s ease-out both; }
@keyframes cat-lk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.cat-ui-shell.in .cat-pt { animation: cat-pt-in .4s ease-out both; }
@keyframes cat-pt-in { from { opacity: 0; } to { opacity: 1; } }

/* chi preferisce meno movimento vede subito il workflow completo */
@media (prefers-reduced-motion: reduce) {
  .cat-ui-shell.in .cat-nd,
  .cat-ui-shell.in .cat-lk,
  .cat-ui-shell.in .cat-pt { animation: none; }
  .cat-lk { stroke-dasharray: none; }
}