/* =========================================================
Voice Pro — Landing page
Replica fedele 1:1 del design system della pagina di
riferimento Voice Pro (costruita in 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-800:#1e293b;
  --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;
  --indigo-500:#2f86cc;
  --indigo-600:#2071b8;
  --indigo-700:#195a93;
  --violet-50:#eef6fc;
  --violet-100:#dbecf9;
  --violet-200:#bcdcf2;
  --violet-500:#3b9be0;
  --violet-600:#2f86cc;

  /* accents */
  --rose-50:#fff1f2;
  --rose-200:#fecdd3;
  --rose-500:#f43f5e;
  --rose-600:#e11d48;
  --orange-500:#f97316;
  --amber-500:#f59e0b;
  --emerald-500:#10b981;
  --blue-500:#3b82f6;
  --cyan-500:#06b6d4;
  --teal-500:#14b8a6;
  --purple-500:#3b9be0;
  --pink-500:#ec4899;
  --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-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --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;
}

/* ============ 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; }
.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(--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-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 */

/* Titolo confronto: tre righe su mobile, due righe da tablet in su (desktop invariato) */
.confronto-h2 .br-mobile { display: none; }
@media (max-width: 639px) {
  .confronto-h2 { font-size: 22px; white-space: normal; }

  /* niente nowrap: va a capo e resta centrato */
  .confronto-h2 .br-mobile { display: inline; }
  .confronto-h2 .br-desktop { display: none; }
}
.sechead--xl h2 {
}
@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--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); }
}
.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; }

/* ============ CONFRONTO (carta vs digitale) ============ */
.compare { margin-top: 64px; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .compare { margin-top: 80px; }
}
@media (min-width: 768px) {
  .compare { grid-template-columns: repeat(2,1fr); gap: 28px; }
}
.compare__card {
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.8);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(4px);
  padding: 32px;
  transition: transform .3s ease, box-shadow .3s ease;

  /* come i box: sollevamento in hover */
}

/* .compare davanti per vincere sulla specificità di .reveal.in */
.compare .compare__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px -10px rgba(15,23,42,.18);
}
.compare .compare__card--bad:hover { box-shadow: 0 18px 32px -10px rgba(244,63,94,.28); }
.compare .compare__card--good:hover { box-shadow: 0 18px 32px -10px rgba(16,185,129,.28); }
.compare__card--bad { border-color: var(--rose-200); }
.compare__card--good {
  border-color: rgba(16,185,129,.4);
  background: linear-gradient(to bottom right, #ecfdf5, rgba(255,255,255,.7));
}
.compare__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
}
.compare__tag svg { width: 16px; height: 16px; }
.compare__tag--bad { background: var(--rose-50); color: var(--rose-600); }
.compare__tag--good { background: #d1fae5; color: #047857; }
.compare__intro { margin-bottom: 20px; font-size: 14px; font-weight: 600; color: var(--slate-500); }
.compare__list { list-style: none; display: grid; gap: 16px; }
.compare__list li { display: flex; align-items: flex-start; gap: 12px; }
.compare__ic {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compare__ic svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compare__list--bad .compare__ic { background: var(--rose-50); color: var(--rose-500); }
.compare__list--good .compare__ic { background: #d1fae5; color: var(--emerald-500); }
.compare__list span.t { font-size: 15px; line-height: 1.55; color: var(--slate-600); }
.compare__list strong { color: var(--slate-900); font-weight: 700; }
.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); }

/* ============ BARRA FISSA (header) ============ */

/* sentinella invisibile: quando esce dalla viewport la barra diventa "attaccata" */
#header-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 40px;
  pointer-events: none;
}
.siteheader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}

/* Sopra l'hero resta trasparente: la leggibilità la dà .hero-topband.
Appena si scorre diventa una barra chiara e compatta, leggibile su ogni sezione. */
.siteheader.is-stuck {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(15,23,42,.07), 0 10px 26px -18px rgba(15,23,42,.5);
}
.siteheader .nav { transition: padding .28s ease; }
.siteheader.is-stuck .nav { padding-top: 12px; padding-bottom: 12px; }
.siteheader.is-stuck .nav__logo { height: 30px; transition: height .28s ease; }
@media (min-width: 640px) {
  .siteheader.is-stuck .nav__logo { height: 34px; }
}

/* Gli ancoraggi non devono finire sotto la barra */
section[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  .siteheader, .siteheader .nav, .siteheader.is-stuck .nav__logo { transition: none; }
}

/* ============ 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; }
.hero__content { padding: 24px 0 80px; }

/* pt-6 pb-20 */
@media (min-width: 640px) {
  .hero__content { padding-top: 40px; }
}

/* sm:pt-10 */
@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 ambiente di sfondo (entrata in zoom) ---- */
.hero-photo-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 640px;
  background: var(--slate-900);
  padding-top: 88px;

  /* compensa la barra fissa, uscita dal flusso */
}
@media (max-width: 639px) {
  .hero-photo-sec { padding-top: 76px; }
}
@media (min-width: 1024px) {
  .hero-photo-sec { min-height: 85vh; }
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 35%;
  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, così lo smartphone della foto resta inquadrato per intero
(desktop invariato). Nota: l'immagine è landscape in un box verticale → object-fit:cover
combacia in altezza e object-position sceglie la porzione orizzontale da mostrare. */
@media (max-width: 1023px) {
  .hero-photo { animation: none; object-position: 55% 50%; }
}

/* 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) 55%, rgba(255,255,255,.45) 88%, rgba(255,255,255,.3));
  }
}

/* Scrim extra di leggibilità solo su mobile: senza, il telefono della foto
traspare dietro al paragrafo e lo rende faticoso da leggere. */
.hero-scrim-mobile { position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.20); }
@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; }
.hero h1 { font-size: 30px; line-height: 1.15; }

/* text-3xl */
@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; }
}

/* "Guarda il video..." a capo { margin-top: 8px; font-size: 14px; color: var(--slate-500); }

/* mt-2 text-sm slate-500 */

/* sm:mt-3 sm:text-base */
.hero__cta { margin-top: 32px; }

/* gap-12 */
.checklist span.t { color: var(--slate-700); font-size: 16px; line-height: 1.5; }

/* w-[280px] */

/* ============ BIO — replica esatta (Tailwind 1:1) ============ */
.bio .wrap { max-width: var(--maxw); }
.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; }
}

/* ============ MODULES (sezione propria { margin-top: 64px; display: grid; gap: 24px; grid-template-columns: 1fr; }

/* ============ 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 .tvideo {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0e2c49 0%, #195a93 55%, #2f86cc 100%);
}
.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; }
}

/* Titolo CTA: righe bilanciate e centrate (simmetriche) */
.cta h2.cta__h2--balance { text-wrap: balance; }
.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; }
.form .btn-cta { width: 100%; margin-top: 22px; }

/* Form Zoho (iframe embed).
   La pagina Zoho ha ampi margini interni vuoti sopra e sotto al modulo: li
   ritagliamo con margini negativi sull'iframe, resi invisibili da overflow:hidden
   sul contenitore. Angoli arrotondati e ombra stanno quindi sul contenitore. */
.form-embed {
  margin: 40px auto 0;
  max-width: 672px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow-2xl);
}
.form-embed__iframe {
  display: block;
  width: 100%;
  min-height: 1100px;
  border: 0;
  background: #fff;
  margin-top: -64px;      /* ritaglio desktop */
  margin-bottom: -48px;
}

/* Mobile: la pagina Zoho ha margini più stretti, serve un ritaglio minore */
@media (max-width: 639px) {
  .form-embed__iframe { margin-top: -48px; margin-bottom: 0; }
}

/* ============ FOOTER ============ */
.footer { background: var(--slate-950); border-top: 1px solid rgba(148,163,184,.12); padding: 32px 0; }
.footer__inner {
  max-width: 1200px;
  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 32px; }
}
.footer__logo { height: 40px; width: auto; }
.footer__right { text-align: right; display: grid; gap: 8px; margin-left: auto; }
.footer__info { font-size: 13px; line-height: 1.5; color: var(--slate-400); white-space: nowrap; }
.footer__policy {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 13px;
}
.footer__policy span { color: var(--slate-600); }
.footer__policy a { color: var(--slate-400); transition: color .2s ease; }
.footer__policy a:hover { color: #fff; }

/* Disclosure sui visual generati con AI: sotto le policy, tono più discreto */
.footer__ai { font-size: 12px; line-height: 1.5; color: var(--slate-500); }
@media (max-width: 560px) {
  .footer__inner { justify-content: center; padding: 0 16px; }
  .footer__right { text-align: center; margin-left: 0; justify-items: center; }
  .footer__policy { justify-content: center; }

  /* l'indirizzo resta su una riga sola: il corpo si adatta alla larghezza dello schermo */
  .footer__info { font-size: clamp(9px, 2.9vw, 13px); }
}

/* ============ IPHONE MOCKUP (sezione "Si adatta a te") ============ */

/* Mockup iPhone da immagine PNG (schermo trasparente { position: relative; display: flex; align-items: center; justify-content: center; }

/* ============ CICLO / ANELLO (sezione "Il meccanismo") ============ */
.loop {
  margin-top: 56px;
  display: grid;
  gap: 40px;
  align-items: center;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 1024px) {
  .loop {
    grid-template-columns: 420px minmax(0, 520px);
    gap: 56px;
    justify-items: start;
    justify-content: center;
  }
}
.ring { position: relative; width: 320px; height: 320px; flex: 0 0 auto; }
@media (min-width: 640px) {
  .ring { width: 400px; height: 400px; }
}
.ring__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring__track { fill: none; stroke: var(--indigo-100); stroke-width: 2; }
.ring__dash {
  fill: none;
  stroke: var(--indigo-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 60 1000;
  animation: ring-run 7s linear infinite;
}
@keyframes ring-run {
  to { stroke-dashoffset: -1060; }
}
.ring__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--grad-azz);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 16px 34px -12px rgba(32,113,184,.75);
}
.ring__core svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ring__core b { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ring__node {
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--slate-200);
  box-shadow: 0 8px 20px -8px rgba(15,23,42,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--indigo-600);
  animation: node-pulse 7s ease-in-out infinite;
}
.ring__node svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* numero del nodo: badge sul bordo, resta sempre dentro al contenitore */
.ring__node em {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad-azz);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -3px rgba(32,113,184,.7);
}
.ring__node--a { top: -6px; left: 50%; margin-left: -37px; animation-delay: 0s; }
.ring__node--b { right: -6px; top: 50%; margin-top: -37px; animation-delay: 1.75s; }
.ring__node--c { bottom: -6px; left: 50%; margin-left: -37px; animation-delay: 3.5s; }
.ring__node--d { left: -6px; top: 50%; margin-top: -37px; animation-delay: 5.25s; }
@keyframes node-pulse {
  0%, 100% { transform: scale(1); border-color: var(--slate-200); }
  6% {
    transform: scale(1.12);
    border-color: var(--indigo-500);
    box-shadow: 0 10px 26px -6px rgba(32,113,184,.55);
  }
  18% { transform: scale(1); border-color: var(--slate-200); }
}
.ring__node--a { transform-origin: center; }
.loop__list { display: grid; gap: 18px; list-style: none; max-width: 460px; }
.loop__list li { display: flex; gap: 14px; align-items: flex-start; }
.loop__list b { display: block; color: var(--slate-900); font-size: 15px; font-weight: 700; }
.loop__list span { font-size: 14px; color: var(--slate-600); line-height: 1.55; }
.loop__n {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--indigo-50);
  color: var(--indigo-600);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Riduzione del movimento: l'anello resta fermo */
@media (prefers-reduced-motion: reduce) {
  .ring__dash, .ring__node { animation: none; }
}

/* ============ 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);
  border-bottom: 2.5px solid var(--indigo-600);
  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); 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);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq__link:hover { color: var(--indigo-700); }
@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; }
}