/* =========================================================
   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; }
.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-hero  { background: linear-gradient(to bottom, var(--indigo-50), rgba(212,230,246,.4) 55%, var(--violet-50)); }
.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-mod   { background: linear-gradient(to bottom, var(--violet-50), rgba(234,243,251,.5) 50%, var(--slate-100)); }
.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-a { left: -160px; top: -160px; width: 600px; height: 600px; background: rgba(169,205,238,.6); filter: blur(120px); }
.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 */
.sechead--narrow { max-width: 768px; }                                           /* 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 */
.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--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); }
}
.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 */
.sol-note { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px;
  font-size: 15px; font-weight: 600; color: var(--slate-700); }
.sol-note span { display: inline-flex; align-items: center; gap: 8px; }
.sol-note svg { width: 18px; height: 18px; flex: 0 0 auto; color: #16a34a; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

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

/* 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); }

/* ============ 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) */
.btn-cta--green { background: linear-gradient(to right, #16a34a, #22c55e);
  box-shadow: 0 10px 15px -3px rgba(34,197,94,.3), 0 4px 6px -4px rgba(34,197,94,.3); }
.btn-cta--green:hover { box-shadow: 0 20px 25px -5px rgba(34,197,94,.35), 0 8px 10px -6px rgba(34,197,94,.35); }

/* ---- 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);
}
@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: 88% 8%;
  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; } }

/* 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,.82) 45%, rgba(255,255,255,.26)); }
}
/* Scrim extra di leggibilità solo su mobile */
.hero-scrim-mobile { position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.08); }
@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));
}
/* Mobile: banda più leggera così il volto in alto resta visibile (il logo è già su bianco dal velo) */
@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__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__grid { display: grid; gap: 48px; align-items: center; grid-template-columns: 1fr; } /* gap-12 */
@media (min-width: 1024px) { .hero__grid { grid-template-columns: repeat(2,1fr); gap: 64px; } } /* lg:grid-cols-2 lg:gap-16 */
.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; } } /* sm:mt-6 sm:text-lg */
.hero__lead-cta { display: block; margin-top: 12px; }                            /* "Guarda il video..." a capo, distanziata */
.hero__sub { margin-top: 8px; font-size: 14px; color: var(--slate-500); }        /* mt-2 text-sm slate-500 */
@media (min-width: 640px) { .hero__sub { margin-top: 12px; font-size: 16px; } }  /* sm:mt-3 sm:text-base */
.hero__cta { margin-top: 32px; }                                                 /* mt-8 */
.hero__media { position: relative; display: flex; justify-content: center; }
.hero__media-glow {
  position: absolute; inset: -16px; border-radius: 24px;                          /* -inset-4 rounded-3xl */
  background: linear-gradient(to bottom right, var(--indigo-100), var(--violet-100));
  filter: blur(32px);                                                            /* blur-2xl */
}
.hero__media img { position: relative; width: 100%; max-width: 512px;            /* max-w-lg */
  filter: drop-shadow(0 25px 50px rgba(0,0,0,.25)); }                            /* drop-shadow-2xl */

/* Placeholder video nell'hero (verticale 9:16) */
.hero__video { position: relative; width: 100%; max-width: 340px; }
.hero__video .video-ph { aspect-ratio: 9 / 16; }
.hero__video iframe, .hero__video video {
  width: 100%; aspect-ratio: 9 / 16; border: 0; display: block;
  border-radius: 16px; box-shadow: var(--shadow-xl); }

/* Telefono hero ricostruito in CSS (schermata Voice Pro) — non più usato */
.hphone { position: relative; width: 300px; max-width: 100%;
  filter: drop-shadow(0 30px 55px rgba(32,113,184,.28)); }
.hphone__device {
  position: relative; width: 100%; aspect-ratio: 300 / 612;
  background: #0b0b0f; border-radius: 46px; padding: 11px;
}
.hphone__screen {
  position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
  background: linear-gradient(180deg, #e6c9f6 0%, #f6eefc 34%, #eef4ff 64%, #d8e7fb 100%);
}
.hphone__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 26px; background: #0b0b0f; border-radius: 14px; z-index: 2; }
.hphone__call { position: absolute; top: 62px; left: 0; right: 0; text-align: center; padding: 0 16px; }
.hphone__time { display: block; font-size: 15px; color: #475569; }
.hphone__name { display: block; margin-top: 4px; font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(to right, #2071b8, #2f86cc);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hphone__controls { position: absolute; left: 0; right: 0; bottom: 38px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 26px; padding: 0 38px; justify-items: center; }
.hpbtn { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.55);
  display: grid; place-items: center; color: #1e293b; }
.hpbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hpbtn--end { background: #ef4444; color: #fff; }

.hbadge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 9999px; padding: 11px 18px;
  font-size: 15px; font-weight: 700; color: var(--indigo-700); white-space: nowrap;
  box-shadow: 0 14px 30px rgba(15,23,42,.16); }
.hbadge--tl { top: 4%; left: -10%; }
.hbadge--r  { top: 30%; right: -20%; }
.hbadge--l  { top: 49%; left: -10%; }
.hbadge--br { top: 63%; right: -10%; }
@media (max-width: 1023px) {
  .hbadge--tl { left: -4%; } .hbadge--l { left: -2%; }
  .hbadge--r { right: -8%; } .hbadge--br { right: -4%; }
}
@media (max-width: 600px) {
  .hphone { width: 260px; }
  .hbadge { font-size: 12px; padding: 8px 13px; }
  .hbadge--r { right: -4%; } .hbadge--br { right: 0; }
}

/* ============ VOCE (audio demo) ============ */
.voce__grid { display: grid; gap: 48px; align-items: center; grid-template-columns: 1fr; } /* gap-12 */
@media (min-width: 1024px) { .voce__grid { grid-template-columns: repeat(2,1fr); gap: 80px; } } /* lg:grid-cols-2 lg:gap-20 */
.voce__h2 { font-size: 24px; line-height: 1.15; }
@media (min-width: 640px) { .voce__h2 { font-size: 30px; } }
@media (min-width: 1024px) { .voce__h2 { font-size: 44px; line-height: 1.25; } }
.voce__p { margin-top: 16px; font-size: 18px; color: var(--slate-600); }
.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; }

/* ============ CAROSELLO SCHERMATE PIATTAFORMA ============ */
.screens { position: relative; margin-top: 56px; }
@media (min-width: 640px) { .screens { margin-top: 64px; } }
.screens__track {
  display: flex; align-items: flex-start; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-inline: 8%;                                   /* spazio per centrare la prima/ultima slide */
}
@media (min-width: 768px) { .screens__track { padding-inline: 14%; gap: 32px; } }
.screens__track::-webkit-scrollbar { display: none; }
.screens__slide {
  flex: 0 0 84%; scroll-snap-align: center;             /* più stretta del contenitore: i vicini "sbirciano" */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 24px; padding: 6px 2px;
  transition: opacity .3s ease;
}
@media (min-width: 768px) { .screens__slide { flex-basis: 72%; } }
.screens__slide:not(.is-active) { opacity: .45; cursor: pointer; }  /* vicini attenuati e cliccabili */
.screens__media { width: 100%; max-width: 860px; margin: 0 auto; }
.screens__ph {
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  border: 1px dashed rgba(148,163,184,.6);
  background: linear-gradient(135deg, #ffffff, var(--violet-50));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xl);
}
.screens__ph span { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-400); }
.screens__ph:has(img) { aspect-ratio: auto; border: none; background: transparent; box-shadow: none; overflow: visible; }  /* mostra la trasparenza del PNG */
.screens__ph img { width: 100%; height: auto; display: block; }
.screens__slide:not(.is-active) .screens__text { display: none; }  /* solo lo screen attivo mostra titolo e testo */
.screens__text h3 { font-size: 24px; color: var(--slate-900); }
@media (min-width: 1024px) { .screens__text h3 { font-size: 30px; } }
.screens__text { max-width: 640px; }
.screens__text p { margin: 12px auto 0; font-size: 16px; line-height: 1.6; color: var(--slate-600); }

.screens__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.screens__nav {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid rgba(226,232,240,.9); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center; color: var(--slate-700);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.screens__nav:hover { background: var(--indigo-50); color: var(--indigo-600); }
.screens__nav:disabled { opacity: .35; cursor: default; }
.screens__nav svg { width: 22px; height: 22px; }
.screens__dots { display: flex; align-items: center; gap: 10px; }
.screens__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--indigo-200); transition: background .2s ease, transform .2s ease, width .2s ease;
}
.screens__dot:hover { background: var(--indigo-500); }
.screens__dot.is-active { width: 26px; background: var(--indigo-600); }

/* Box benefici (sezione soluzione) */
.benefit {
  margin-top: 40px;
  border-radius: 16px; border: 1px solid rgba(226,232,240,.8);
  background: rgba(255,255,255,.7); backdrop-filter: blur(4px);
  padding: 32px;
}
.benefit__title { font-size: 20px; }
.checklist--grid { margin-top: 24px; }
@media (min-width: 768px) { .checklist--grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }

/* phone mockup + overlaid player */
.phone { position: relative; display: flex; align-items: center; justify-content: center; }
.phone__frame { position: relative; width: 280px; }                              /* w-[280px] */
@media (min-width: 640px) { .phone__frame { width: 320px; } }                    /* sm:w-[320px] */
.phone__img { position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.18)); }
.player {
  position: absolute; left: 13%; right: 13%; top: 29%; z-index: 2;                /* appena sotto "Ristorante", con piccolo stacco */
}
.player__pill { text-align: center; margin-bottom: 8px; }
.player__pill span {
  display: inline-block; border-radius: 8px; border: 1px solid rgba(52,211,153,.5);
  background: rgba(16,185,129,.2); padding: 4px 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6ee7b7;
}
.player__cap { text-align: center; margin-bottom: 12px; font-size: 12px; color: rgba(255,255,255,.6); }
.player__row { display: flex; align-items: center; justify-content: center; gap: 8px; }  /* traccia centrata */
.player__btn {
  display: flex; margin: 16px auto 0;                                            /* sotto la traccia, centrato */
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;     /* leggermente più grande */
  background: #8b5cf6; align-items: center; justify-content: center;             /* violetto: accento del mockup */
  transition: background .2s ease, transform .1s ease;
}
.player__btn:hover { background: #a78bfa; }
.player__btn:active { transform: scale(.92); }
.player__btn svg { width: 20px; height: 20px; color: #fff; fill: currentColor; }
.player__btn .ico-pause { display: none; }
.player.is-playing .player__btn .ico-play { display: none; }
.player.is-playing .player__btn .ico-pause { display: inline; }
.player__wave { position: relative; flex: 0 1 auto; min-width: 0; }              /* niente overflow */
.wave-bg, .wave-pg { display: flex; align-items: center; gap: 2px; height: 24px; }
.wave-pg { position: absolute; inset: 0; overflow: hidden; }
.wave-bg i { width: 2.5px; border-radius: 9px; background: rgba(148,163,184,.35); flex-shrink: 0; display: block; }
.wave-pg i { width: 2.5px; border-radius: 9px; background: #8b5cf6; flex-shrink: 0; display: block; }   /* violetto: onda del player */
.player__time { flex: 0 0 auto; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.5); }
.player__note { margin-top: 12px; font-size: 11px; text-align: center; color: rgba(255,255,255,.4); }

/* ============ 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%; }
.video-ph {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(226,232,240,.8);
  background: linear-gradient(135deg, #0e2c49 0%, #195a93 55%, #2f86cc 100%);
  box-shadow: var(--shadow-xl); display: grid; place-items: center;
}
.video-ph::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.14), transparent 60%); }
.video-ph__play {
  position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--violet-600);
  display: grid; place-items: center; padding-left: 5px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .15s ease, background .15s ease;
}
.video-ph__play svg { fill: currentColor; }
.video-ph__play:hover { transform: scale(1.06); background: #fff; }
.video-ph__label { position: absolute; z-index: 1; bottom: 16px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.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, stile coerente) ============ */
.modgrid { margin-top: 64px; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .modgrid { margin-top: 80px; grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .modgrid { grid-template-columns: repeat(4,1fr); } }
.mod {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: 16px; border: 1px solid rgba(226,232,240,.8);
  background: rgba(255,255,255,.7); backdrop-filter: blur(4px); padding: 20px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.mod:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.mod img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.mod h4 { font-size: 15px; font-weight: 700; color: var(--slate-900); margin-bottom: 4px; }
.mod p { font-size: 13px; color: var(--slate-500); line-height: 1.45; }
.mod--hl { border-color: var(--violet-200); background: linear-gradient(135deg, #faf5ff, rgba(255,255,255,.7)); }

/* ============ 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%); }
.tvideo__play { width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--violet-600); display: grid; place-items: center; padding-left: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,.3); transition: transform .15s ease, background .15s ease; }
.tvideo__play:hover { transform: scale(1.08); background: #fff; }
.tvideo__play svg { width: 26px; height: 26px; fill: currentColor; }
.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 {
  margin: 40px auto 0; max-width: 672px; text-align: left;                       /* mt-10 max-w-2xl */
  background: #fff; border-radius: 16px; padding: 36px; box-shadow: var(--shadow-2xl);
}
/* Form Zoho embeddato via iframe */
.zoho-form {
  margin: 40px auto 0; max-width: 672px;
  background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--shadow-2xl);
  overflow: hidden;
}
.zoho-form iframe { display: block; width: 100%; height: 1100px; border: 0; border-radius: 10px; }
/* Mobile: il form Zoho ha molto padding interno (sopra al 1° campo e in fondo).
   Il box ha già overflow:hidden, quindi tiriamo su l'iframe per ritagliare quel vuoto. */
@media (max-width: 640px) {
  .zoho-form { padding: 0; }
  .zoho-form iframe { margin-top: -28px; margin-bottom: -28px; border-radius: 16px; }
}
.form .field { margin-bottom: 20px; }
.form .flabel { display: block; font-size: 17px; font-weight: 700; color: var(--slate-900); margin-bottom: 10px; }
.req { color: #ef4444; }
/* input wrapper con icona */
.inp { position: relative; }
.inp__ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--slate-400); pointer-events: none; }
.inp__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--slate-900);
  padding: 14px 16px; border: 1px solid var(--slate-300); border-radius: 10px;
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.inp .form-i { padding-left: 44px; }                                             /* spazio per l'icona */
.form input::placeholder, .form textarea::placeholder { color: var(--slate-400); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 0; border-color: var(--violet-500);
  box-shadow: 0 0 0 4px rgba(32,113,184,.15);
}
.form select { appearance: none; -webkit-appearance: none; padding-right: 44px; color: var(--slate-500); cursor: pointer; }
.form select.filled { color: var(--slate-900); }
.inp--select .inp__chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--slate-500); pointer-events: none; }
.inp--select .inp__chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__sub { display: flex; flex-direction: column; }
.form__hint { margin-top: 6px; font-size: 13px; color: var(--slate-500); }
/* checkbox */
.check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 22px; height: 22px;
  margin: 2px 0 0; border: 1.5px solid var(--slate-300); border-radius: 6px; background: #fff; cursor: pointer; position: relative; transition: border-color .15s, background .15s; }
.check input:checked { background: var(--violet-600); border-color: var(--violet-600); }
.check input:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.check span { font-size: 15px; line-height: 1.5; color: var(--slate-700); }
/* links + nota */
.form__links { margin-top: 18px; display: grid; gap: 4px; }
.form__links a { font-size: 14px; color: var(--slate-600); text-decoration: underline; }
.form__links a:hover { color: var(--violet-700); }
.form__req { margin-top: 8px; font-size: 13px; color: var(--slate-500); }
.form .btn-cta { width: 100%; margin-top: 22px; }
.form__ok { display: none; text-align: center; padding: 40px 24px; color: var(--emerald-500); font-weight: 600; }

/* ============ 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; }
.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); }
.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; }
@media (max-width: 560px) {
  .footer__inner { justify-content: center; }
  .footer__right { text-align: center; margin-left: 0; justify-items: center; }
  .footer__policy { justify-content: center; }
}

/* ============ 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; }
  .form { padding: 26px; }
  .form__row { grid-template-columns: 1fr; }
  .player { left: 11%; right: 11%; }
}