/* =========================================================
   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); --c: var(--rose-500); }
.compare__card--good { border-color: rgba(16,185,129,.4); background: linear-gradient(to bottom right, #ecfdf5, rgba(255,255,255,.7)); --c: var(--emerald-500); }
/* stesso hover delle .card: sollevamento + ombra nel colore del box (specificità > .reveal.in) */
.compare .compare__card:hover { transform: translateY(-6px);
  box-shadow: 0 18px 32px -10px color-mix(in srgb, var(--c, var(--indigo-500)) 45%, transparent); }
.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); }

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

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

/* Su mobile la foto copre in altezza e non ha margine verticale: un filo di zoom in più
   crea lo scarto per spostare il soggetto verso destra e verso il basso, liberando il testo. */
@media (max-width: 1023px) {
  .hero-photo { object-position: 58% 50%; transform: scale(1.16) translate(5%, 4%); animation-name: hero-zoom-mob; }
}
@keyframes hero-zoom-mob {
  from { transform: scale(1.26) translate(5%, 4%); }
  to   { transform: scale(1.16) translate(5%, 4%); }
}

/* 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;
}
@media (min-width: 768px) { .screens__slide { flex-basis: 72%; } }
.screens__slide:not(.is-active) { cursor: pointer; }                /* vicini cliccabili */
/* opacità di slide e testo sono guidate dal JS in funzione della distanza dal centro:
   il testo sfuma seguendo lo scorrimento invece di comparire di scatto */
.screens__text { max-width: 640px; will-change: opacity, transform; }
/* fallback: senza gli stili inline del JS il testo resta visibile solo sulla slide centrata */
.screens__slide:not(.is-active) .screens__text { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .screens__text { transform: none !important; } }
.screens__text h3 { font-size: 24px; color: var(--slate-900); }
@media (min-width: 1024px) { .screens__text h3 { font-size: 30px; } }
.screens__text p { margin: 12px auto 0; font-size: 16px; line-height: 1.6; color: var(--slate-600); }
.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__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); }

/* Mobile: il mockup ha la precedenza sullo "sbirciare" dei vicini.
   La slide prende tutta la larghezza — sfora anche il padding del wrap — così
   l'interfaccia del tablet resta leggibile. Frecce, dots, scorrimento e
   scroll-snap restano identici: le altre schermate ci sono, arrivano da fuori campo. */
@media (max-width: 767px) {
  /* il mockup sta al centro ottico fra il testo della sezione e quello della slide:
     46px di stacco per parte, al netto del leading delle due righe di testo */
  .screens { margin-inline: -8px; margin-top: 36px; } /* 24px di .wrap - 8 = 16px di respiro sui lati */
  .screens__track { padding-inline: 0; gap: 16px; }  /* niente spazio laterale per i vicini */
  .screens__slide { flex-basis: 100%; padding-inline: 0; row-gap: 44px; }
  .screens__text { padding-inline: 16px; }           /* il testo mantiene i suoi margini */

  /* I comandi salgono sopra il mockup: si vedono senza scorrere e non spezzano
     più la coppia mockup + didascalia. Niente pillole bianche con ombra, solo
     due frecce leggere e dei puntini piccoli: guidano, non si fanno notare. */
  .screens { display: flex; flex-direction: column; }
  .screens__controls { order: -1; margin: 0 0 22px; padding-inline: 8px; gap: 12px; }
  .screens__nav {
    width: 32px; height: 32px;
    background: transparent; border: 0; box-shadow: none;
    color: var(--slate-400);
  }
  .screens__nav:hover { background: transparent; color: var(--indigo-500); }
  .screens__nav svg { width: 20px; height: 20px; }
  .screens__dots { gap: 7px; }
  .screens__dot { width: 7px; height: 7px; background: var(--slate-300); }
  .screens__dot.is-active { width: 18px; background: var(--indigo-500); }
}

/* 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: -72px; 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; }
/* dicitura AI: riga propria sotto le policy, più piccola e discreta */
.footer__ai { font-size: 11.5px; line-height: 1.5; color: var(--slate-500); }
@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; }
  /* ragione sociale sempre su una riga: il corpo si adatta alla larghezza disponibile */
  .footer__info { white-space: nowrap; font-size: min(13px, (100vw - 60px) / 28.5); }
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   MOCKUP TABLET — area Delivery della piattaforma.
   Illustrazioni fedeli all'interfaccia reale: le etichette dell'UI restano
   testo, mentre ogni dato (nomi, importi, orari, conteggi) diventa una barra.
   Stesso linguaggio visivo dei mockup della pagina Business Intelligence.
   ═══════════════════════════════════════════════════════════════════════════ */

.screens__media { container-type: inline-size; }
.screens__ph:has(.mtb) { aspect-ratio: auto; border: none; background: transparent; box-shadow: none; overflow: visible; display: block; }

/* ---------- scocca tablet ---------- */
.mtb {
  font-size: clamp(3.1px, 1.163cqw, 10px);   /* 1em = unità base, scala col contenitore */
  --u: 1em;
  width: 100%; overflow: hidden;
  border-radius: calc(var(--u) * 1.5);
  border: 1px solid rgba(226, 232, 240, .9);
  background: #fff;
  box-shadow: var(--shadow-2xl);
  transition: transform .3s ease, box-shadow .3s ease;
}
/* stesso hover delle card: sollevamento + ombra colorata. Solo su puntatore vero,
   così sul touch il tap che cambia slide non lascia il mockup sollevato. */
@media (hover: hover) {
  .screens__media:hover .mtb {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px -14px color-mix(in srgb, var(--indigo-500) 50%, transparent),
                0 8px 16px -8px rgba(15,23,42,.18);
  }
}
.mtb__screen {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  aspect-ratio: 1.4;
  border-radius: inherit;
  background: #fff; color: var(--slate-700);
  text-align: left;   /* la slide centra il testo: i mockup no */
  font-weight: 600; line-height: 1.25;
  font-size: calc(var(--u) * .9);
}

/* ---------- atomi condivisi: le barre al posto dei dati ---------- */
.dv-bar {
  display: block; flex: 0 0 auto;
  width: var(--w, 60%); height: calc(var(--u) * .9);
  border-radius: 999em;
  background: linear-gradient(to right, var(--slate-300), var(--slate-200));
}
.dv-bar--xs   { height: calc(var(--u) * .55); }
.dv-bar--soft { background: linear-gradient(to right, var(--slate-200), var(--slate-100)); }

/* ═══ MOCKUP A — cruscotto ordini per stato ═══
   Stessa scala del mockup B: --k = 1% della larghezza dello schermo. */
.dvA { --k: calc(var(--u) * .837); font-size: calc(var(--k) * 1.3); }

/* ---------- testata ---------- */
.a-head { display: flex; align-items: center; gap: calc(var(--k) * 1.1); padding: 0 calc(var(--k) * 1.3); height: calc(var(--k) * 8.1); flex: 0 0 auto; }
/* logo ufficiale Pienissimo, non una ricostruzione */
.a-brand { height: calc(var(--k) * 2.9); width: auto; flex: 0 0 auto; display: block; }
.a-days { display: flex; gap: calc(var(--k) * .45); min-width: 0; overflow: hidden; }
.a-day { flex: 0 0 auto; width: calc(var(--k) * 7); padding: calc(var(--k) * .45) 0; display: grid; justify-items: center; gap: calc(var(--k) * .12);
  border: 1px solid #e4e4e4; border-radius: calc(var(--k) * .5); background: #fff; }
.a-day b { font-size: calc(var(--k) * 1.08); font-weight: 700; color: #e5352b; }
.a-day s { text-decoration: none; font-size: calc(var(--k) * 2.55); font-weight: 800; color: #111; line-height: 1.05; }
.a-day em { font-size: calc(var(--k) * .92); font-style: normal; color: #8d8d8d; }
.a-day.is-active { background: #e5352b; border-color: #e5352b; }
.a-day.is-active b, .a-day.is-active s, .a-day.is-active em { color: #fff; }
.a-tools { margin-left: auto; display: inline-flex; align-items: center; gap: calc(var(--k) * 1.5); color: #3a3a3a; }
.a-tools svg { width: calc(var(--k) * 2.2); height: calc(var(--k) * 2.2); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a-tools .is-plus { color: #35b34a; stroke-width: 2.4; }
.a-rule { height: calc(var(--k) * .32); background: #7ac143; flex: 0 0 auto; }

/* ---------- colonne per stato ---------- */
.a-cols { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--k) * .9); padding: calc(var(--k) * .95); align-content: start; min-height: 0; }
.a-col { display: flex; flex-direction: column; gap: calc(var(--k) * .48); min-width: 0; }
.a-colhead { text-align: center; padding: calc(var(--k) * .58) 0; border-radius: calc(var(--k) * .45); font-size: calc(var(--k) * 1.28); font-weight: 800; }
.a-tot { display: flex; align-items: center; gap: calc(var(--k) * .45); font-size: calc(var(--k) * 1.22); color: #333; }
.a-tot .dv-bar { width: calc(var(--k) * 3.3); height: calc(var(--k) * 1.15); margin-right: auto; }

.a-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: calc(var(--k) * .3); padding: calc(var(--k) * .28) calc(var(--k) * .6);
  border-radius: 999em; color: #fff; font-size: calc(var(--k) * 1.05); font-weight: 700; }
.a-chip svg { width: calc(var(--k) * 1.1); height: calc(var(--k) * 1.1); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-chip--red { background: #f4524d; } .a-chip--blue { background: #2196f3; }

/* ---------- scheda ordine ---------- */
.a-card { border: 1px solid #e6e6e6; border-radius: calc(var(--k) * .7); padding: calc(var(--k) * .58); display: grid; gap: calc(var(--k) * .34); min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.a-cardtop { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--k) * .4); }
.a-num { padding: calc(var(--k) * .22) calc(var(--k) * .7); border-radius: calc(var(--k) * .35); color: #fff; font-size: calc(var(--k) * 1.18); font-weight: 700; }
.a-edit { display: inline-flex; align-items: center; gap: calc(var(--k) * .28); font-size: calc(var(--k) * 1.05); color: #8d8d8d; white-space: nowrap; }
.a-edit svg { width: calc(var(--k) * 1.15); height: calc(var(--k) * 1.15); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a-time { display: flex; align-items: center; gap: calc(var(--k) * .5); }
.a-time b { font-size: calc(var(--k) * 1.85); font-weight: 700; color: #111; }
.a-time .a-scoot { font-size: calc(var(--k) * 1.5); }
.a-acts { margin-left: auto; display: inline-flex; align-items: center; gap: calc(var(--k) * .5); }
.a-ico { width: calc(var(--k) * 2); height: calc(var(--k) * 2); border-radius: 50%; border: 1.4px solid #e5352b; display: grid; place-items: center; color: #9a9a9a; }
.a-ico svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-send { width: calc(var(--k) * 2); height: calc(var(--k) * 2); color: #2196f3; }
.a-send svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.a-foot { display: flex; align-items: center; gap: calc(var(--k) * .38); }
.a-foot .dv-bar { width: calc(var(--k) * 3.4); height: calc(var(--k) * 1.25); }
.a-chev { color: #6a6a6a; font-size: calc(var(--k) * 1.1); margin-right: auto; }
.a-pay { width: calc(var(--k) * 1.55); height: calc(var(--k) * 1.55); border-radius: 50%; background: #c6c6c6; color: #fff;
  display: grid; place-items: center; font-size: calc(var(--k) * .95); font-weight: 700; }
.a-pay--amber { background: #f5c542; }
.a-btn { text-align: center; padding: calc(var(--k) * .68) 0; border-radius: calc(var(--k) * .5); font-size: calc(var(--k) * 1.22); font-weight: 700; color: #fff; }
.a-btn--red { background: #f4524d; } .a-btn--orange { background: #f5a623; }

/* ---------- tinte per stato ---------- */
.a-c-blue   .a-colhead { background: #e7f0fd; color: #2f7ac4; }  .a-c-blue   .a-num { background: #2196f3; }
.a-c-green  .a-colhead { background: #e4f6e6; color: #35a04a; }  .a-c-green  .a-num { background: #2ec94a; }
.a-c-amber  .a-colhead { background: #fdf0da; color: #d1962a; }  .a-c-amber  .a-num { background: #f5a623; }
.a-c-violet .a-colhead { background: #eee8f9; color: #7c5cc4; }  .a-c-violet .a-num { background: #9b59d0; }

/* ═══ MOCKUP B — Nuovo Delivery: zone di consegna e mappa ═══
   Scala presa dallo screenshot reale: --k = 1% della larghezza dello schermo,
   ogni misura è il valore reale diviso per la larghezza dello schermo. */
.dvB { --k: calc(var(--u) * .837); font-size: calc(var(--k) * 1.3); }

.b-head { position: relative; display: flex; align-items: center; gap: calc(var(--k) * 1.4); padding: 0 calc(var(--k) * 1.5); height: calc(var(--k) * 4.7); border-bottom: 1px solid var(--slate-200); flex: 0 0 auto; }
.b-back { width: calc(var(--k) * 2.4); height: calc(var(--k) * 2.4); flex: 0 0 auto; color: #e5352b; }
.b-back svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.b-title { position: absolute; left: 0; right: 0; text-align: center; font-size: calc(var(--k) * 1.7); font-weight: 800; letter-spacing: .04em; color: #1a1a1a; pointer-events: none; }
.b-tools { margin-left: auto; display: inline-flex; align-items: center; gap: calc(var(--k) * 1.9); color: #2b2b2b; position: relative; }
.b-tools svg { width: calc(var(--k) * 2.9); height: calc(var(--k) * 2.9); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.b-body { flex: 1; display: grid; grid-template-columns: 34.5% 1fr; min-height: 0; }

/* ---------- form ---------- */
.b-form { display: flex; flex-direction: column; justify-content: space-between; min-height: 0; overflow: hidden; gap: calc(var(--k) * .5); padding: calc(var(--k) * 1.1) calc(var(--k) * 1.2); border-right: 1px solid var(--slate-200); min-width: 0; }
.b-form > * { flex: 0 0 auto; }
.b-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--slate-300); border-radius: calc(var(--k) * .5); overflow: hidden; }
.b-tabs span { text-align: center; padding: calc(var(--k) * .75) 0; font-size: calc(var(--k) * 1.15); font-weight: 600; color: #3a3a3a; background: #fff; }
.b-tabs span.is-active { background: #e5352b; color: #fff; font-weight: 700; }

.b-row { display: grid; grid-template-columns: 30% minmax(0, 1fr) auto; align-items: center; gap: calc(var(--k) * .6); min-width: 0; }
.b-lab { display: inline-flex; align-items: center; gap: calc(var(--k) * .5); font-size: calc(var(--k) * 1.35); font-weight: 500; color: #9a9a9a; line-height: 1.2; }
.b-lab b { color: #e5352b; font-weight: 600; }
.b-lab svg { width: calc(var(--k) * 1.9); height: calc(var(--k) * 1.9); flex: 0 0 auto; fill: none; stroke: #6b6b6b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.b-val { display: flex; align-items: center; }
.b-ctl { display: flex; align-items: center; gap: calc(var(--k) * .5); min-width: 0; overflow: hidden; }

/* selettore data */
.b-day { flex: 0 0 auto; display: grid; justify-items: center; gap: calc(var(--k) * .25); width: calc(var(--k) * 6.4); padding: calc(var(--k) * .5) 0; border: 1px solid var(--slate-200); border-radius: calc(var(--k) * .55); background: #fff; }
.b-day b  { font-size: calc(var(--k) * 1.05); font-weight: 700; color: #e5352b; }
.b-day em { font-size: calc(var(--k) * .85); font-style: normal; color: #9a9a9a; }
.b-day s { text-decoration: none; font-size: calc(var(--k) * 2.4); font-weight: 700; color: #1a1a1a; line-height: 1; }
.b-day.is-active s { color: #fff; }
.b-day.is-active { background: #e5352b; border-color: #e5352b; }
.b-day.is-active b, .b-day.is-active em { color: #fff; }

/* ora */
.b-time { flex: 0 0 auto; padding: calc(var(--k) * .7) calc(var(--k) * .95); border-radius: calc(var(--k) * .4); background: #ececec; font-size: calc(var(--k) * 1.55); font-weight: 500; color: #2b2b2b; margin-right: auto; }
.b-step { flex: 0 0 auto; width: calc(var(--k) * 3.3); height: calc(var(--k) * 2.9); border-radius: calc(var(--k) * .6); display: grid; place-items: center; color: #fff; font-size: calc(var(--k) * 2); font-weight: 700; line-height: 1; }
.b-step--minus { background: #e5352b; } .b-step--plus { background: #2f86cc; }

/* stato ordine e tipo pagamento */
.b-opt { flex: 0 0 auto; width: calc(var(--k) * 4.6); height: calc(var(--k) * 4.6); border: 1px solid var(--slate-200); border-radius: calc(var(--k) * .5); background: #fff; display: grid; place-content: center; justify-items: center; gap: calc(var(--k) * .2); padding: calc(var(--k) * .3) calc(var(--k) * .15); }
.b-opt svg { width: calc(var(--k) * 1.7); height: calc(var(--k) * 1.7); fill: none; stroke: #4a4a4a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.b-opt u { text-decoration: none; font-size: calc(var(--k) * .72); font-weight: 600; line-height: 1.15; text-align: center; color: #4a4a4a; }
.b-opt.is-active { background: #e5352b; border-color: #e5352b; }
.b-opt.is-active svg { stroke: #fff; } .b-opt.is-active u { color: #fff; }
.b-opt--swatch { background: #e5352b; border-color: #e5352b; }
.b-chev { justify-self: end; width: calc(var(--k) * 1.5); height: calc(var(--k) * 1.5); color: #6b6b6b; }
.b-chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.b-toggle { width: calc(var(--k) * 5.2); height: calc(var(--k) * 2.8); border-radius: 999em; background: #e2e2e2; position: relative; }
.b-toggle::after { content: ''; position: absolute; top: calc(var(--k) * .22); left: calc(var(--k) * .22); width: calc(var(--k) * 2.36); height: calc(var(--k) * 2.36); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); }

/* campi di testo */
.b-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: calc(var(--k) * 3.7); padding: 0 calc(var(--k) * .9); border-radius: calc(var(--k) * .35); background: #f2f2f2; font-size: calc(var(--k) * 1.35); font-weight: 500; color: #2b2b2b; }
.b-field--wide { width: 100%; }
.b-mappin { flex: 0 0 auto; width: calc(var(--k) * 2.2); height: calc(var(--k) * 2.2); color: #e5352b; }
.b-mappin svg { width: 100%; height: 100%; }
.b-pinfill { fill: currentColor; stroke: none; }

.b-actions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--k) * .9); }
.b-btn { text-align: center; padding: calc(var(--k) * .85) 0; border-radius: calc(var(--k) * .4); font-size: calc(var(--k) * 1.5); font-weight: 600; color: #fff; }
.b-btn--grey { background: #5a5a5a; } .b-btn--green { background: #35b34a; }

/* ---------- zone e mappa ---------- */
.b-right { display: flex; flex-direction: column; min-width: 0; }
.b-zones { display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; align-items: center; gap: calc(var(--k) * 1); padding: calc(var(--k) * .9) calc(var(--k) * 1.1); border-bottom: 1px solid var(--slate-200); flex: 0 0 auto; }
.b-zone { display: grid; justify-items: center; gap: calc(var(--k) * .35); padding: calc(var(--k) * .55) calc(var(--k) * .4); border: 1.5px solid transparent; border-radius: calc(var(--k) * .5); }
.b-zone b { font-size: calc(var(--k) * 1.5); font-weight: 700; color: #1a1a1a; }
.b-zone u { display: block; width: 88%; height: calc(var(--k) * .3); border-radius: 999em; text-decoration: none; }
.b-zone em { display: flex; align-items: center; gap: calc(var(--k) * .4); font-style: normal; font-size: calc(var(--k) * 1.2); color: #4a4a4a; }
.b-zone.is-active { border-color: #e5352b; }
.b-zone--1 u { background: #35b34a; } .b-zone--2 u { background: #e5357f; } .b-zone--3 u { background: #f0b64a; }

.b-facts { display: flex; align-items: center; gap: calc(var(--k) * .7); padding-left: calc(var(--k) * 1.1); border-left: 1px solid var(--slate-300); }
.b-factpin { flex: 0 0 auto; width: calc(var(--k) * 2.4); height: calc(var(--k) * 2.4); color: #e5352b; }
.b-factpin svg { width: 100%; height: 100%; }
.b-factlist { display: grid; gap: calc(var(--k) * .3); }
.b-factlist em { display: flex; align-items: center; gap: calc(var(--k) * .45); font-style: normal; font-size: calc(var(--k) * 1.25); font-weight: 600; color: #2b2b2b; }
.b-factlist s { text-decoration: none; font-weight: 500; }

.b-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.b-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }

/* ═══ MOCKUP C — composizione ordine dal menu digitale ═══
   Stessa scala degli altri: --k = 1% della larghezza dello schermo. */
.dvC { --k: calc(var(--u) * .837); font-size: calc(var(--k) * 1.3); }

.c-head { position: relative; display: flex; align-items: center; gap: calc(var(--k) * 1.4); padding: 0 calc(var(--k) * 1.4); height: calc(var(--k) * 4.7); border-bottom: 1px solid var(--slate-200); flex: 0 0 auto; }
.c-back { width: calc(var(--k) * 2.4); height: calc(var(--k) * 2.4); flex: 0 0 auto; color: #e5352b; }
.c-back svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.c-title { position: absolute; left: 0; right: 0; text-align: center; font-size: calc(var(--k) * 1.7); font-weight: 800; letter-spacing: .04em; color: #1a1a1a; pointer-events: none; }
.c-tools { margin-left: auto; display: inline-flex; align-items: center; gap: calc(var(--k) * 1.6); color: #2b2b2b; position: relative; }
.c-tools svg { width: calc(var(--k) * 2.9); height: calc(var(--k) * 2.9); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.c-tools .is-on { color: #2b2b2b; fill: currentColor; stroke: none; background: #d8d8d8; border-radius: 50%; padding: calc(var(--k) * .45); box-sizing: content-box; }

.c-body { flex: 1; display: grid; grid-template-columns: 36% 1fr; min-height: 0; }

/* ---------- carrello ---------- */
.c-order { display: flex; flex-direction: column; gap: calc(var(--k) * .6); padding: calc(var(--k) * 1) calc(var(--k) * 1.1); border-right: 1px solid var(--slate-200); min-width: 0; overflow: hidden; }
.c-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--slate-300); border-radius: calc(var(--k) * .5); overflow: hidden; flex: 0 0 auto; }
.c-tabs span { text-align: center; padding: calc(var(--k) * .7) 0; font-size: calc(var(--k) * 1.15); font-weight: 600; color: #3a3a3a; background: #fff; }
.c-tabs span.is-active { background: #e5352b; color: #fff; font-weight: 700; }

.c-sum { display: grid; gap: calc(var(--k) * .5); flex: 0 0 auto; }
.c-sumrow { display: flex; align-items: center; gap: calc(var(--k) * .5); font-size: calc(var(--k) * 1.35); color: #2b2b2b; }
.c-sumrow .dv-bar { width: calc(var(--k) * 3.6); height: calc(var(--k) * 1.2); margin-left: auto; }
.c-sumrow svg { width: calc(var(--k) * 1.5); height: calc(var(--k) * 1.5); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; }
.c-sumrow--tot { font-weight: 800; font-size: calc(var(--k) * 1.5); }

.c-cust { display: flex; align-items: stretch; gap: calc(var(--k) * .8); background: #4a4a4a; border-radius: calc(var(--k) * .3); overflow: hidden; flex: 0 0 auto; }
.c-cust .c-badge { width: calc(var(--k) * 4.4); background: #7ac143; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.c-cust .c-badge svg { width: calc(var(--k) * 1.6); height: calc(var(--k) * 1.6); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.c-cust .c-who { display: grid; gap: calc(var(--k) * .35); flex: 1 1 auto; min-width: 0; padding: calc(var(--k) * .55) 0; }
.c-cust .c-when { font-size: calc(var(--k) * 1.05); color: #e4e4e4; }
.c-cust .c-heat { display: inline-flex; align-items: center; gap: calc(var(--k) * .28); padding-right: calc(var(--k) * .8); }
.c-cust .c-heat svg { width: calc(var(--k) * 1.3); height: calc(var(--k) * 1.3); fill: none; stroke: #cfcfcf; stroke-width: 1.6; }

.c-items { flex: 1; display: grid; align-content: start; gap: calc(var(--k) * .55); min-height: 0; overflow: hidden; }
.c-item { display: grid; grid-template-columns: calc(var(--k) * 2.6) 1fr auto; align-items: baseline; gap: calc(var(--k) * .35) calc(var(--k) * .5);
  padding-bottom: calc(var(--k) * .55); border-bottom: 1px solid #ededed; font-size: calc(var(--k) * 1.35); color: #2b2b2b; }
.c-item .c-qty { font-weight: 600; color: #6a6a6a; }
.c-item .dv-bar { width: calc(var(--k) * 3.2); height: calc(var(--k) * 1.15); }
.c-item .c-opts { grid-column: 1 / 4; display: grid; gap: calc(var(--k) * .22); }
.c-opt { display: grid; grid-template-columns: calc(var(--k) * 2.6) 1fr; align-items: baseline; gap: calc(var(--k) * .5); }
.c-opt i { font-style: normal; text-align: center; }
.c-opt em { font-style: normal; }
.c-item .c-opts span { font-size: calc(var(--k) * 1.05); color: #8a8a8a; }
.c-item .c-note { grid-column: 2 / 3; font-size: calc(var(--k) * 1.05); color: #8a8a8a; }
.c-item .c-extra { grid-column: 3 / 4; justify-self: end; }
.c-item .c-extra .dv-bar { width: calc(var(--k) * 2.3); height: calc(var(--k) * .95); }
.c-conf { margin: 0 calc(var(--k) * 4.2); text-align: center; padding: calc(var(--k) * .8) 0; border-radius: calc(var(--k) * .4); background: #35b34a; color: #fff; font-size: calc(var(--k) * 1.5); font-weight: 700; flex: 0 0 auto; }

/* ---------- menu ---------- */
.c-menu { display: flex; flex-direction: column; gap: calc(var(--k) * .6); padding: calc(var(--k) * 1) calc(var(--k) * 1.1); min-width: 0; position: relative; }
.c-filters { display: flex; gap: calc(var(--k) * .5); min-width: 0; overflow: hidden; flex: 0 0 auto; }
.c-filters span { flex: 1 1 0; min-width: 0; text-align: center; padding: calc(var(--k) * .6) calc(var(--k) * .4); border-radius: calc(var(--k) * .5);
  background: #c9ced6; color: #fff; font-size: calc(var(--k) * 1.15); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-filters span.is-active { background: #1a1a1a; }
.c-filters--cat span { text-transform: uppercase; letter-spacing: .02em; }
.c-search { display: flex; align-items: center; gap: calc(var(--k) * .6); padding: calc(var(--k) * .55) calc(var(--k) * .8); border-radius: calc(var(--k) * .4);
  background: #fff; border: 1px solid var(--slate-200); font-size: calc(var(--k) * 1.2); color: #9a9a9a; flex: 0 0 auto; }
.c-search svg { width: calc(var(--k) * 1.3); height: calc(var(--k) * 1.3); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.c-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: calc(var(--k) * .6); min-height: 0; }
.c-prod { position: relative; display: flex; flex-direction: column; border-radius: calc(var(--k) * .4); background: #eef1f6; overflow: hidden; }
.c-prod--warm { background: #fbeaec; }
.c-prod b { flex: 1; display: grid; place-items: center; text-align: center; padding: calc(var(--k) * .5) calc(var(--k) * .35);
  font-size: calc(var(--k) * 1.15); font-weight: 700; color: #1a1a1a; line-height: 1.2; }
.c-prod u { display: block; text-decoration: none; background: #1a1a1a; padding: calc(var(--k) * .38) 0; text-align: center; }
.c-prod u .dv-bar { width: 52%; height: calc(var(--k) * .85); margin: 0 auto; background: rgba(255,255,255,.9); }
.c-tags { position: absolute; top: calc(var(--k) * .5); right: calc(var(--k) * .5); display: inline-flex; gap: calc(var(--k) * .3); }
.c-tags--center { left: 0; right: 0; justify-content: center; }
.c-tags i { width: calc(var(--k) * 1.7); height: calc(var(--k) * 1.7); border-radius: 50%; display: grid; place-items: center; color: #fff; }
.c-tags i svg { width: 62%; height: 62%; fill: currentColor; }
.c-tags .t-veg { background: #2f9e44; } .c-tags .t-bio { background: #57a83a; } .c-tags .t-leaf { background: #7ab648; }
.c-tags .t-hot { background: #b5651d; }

.c-side { position: absolute; top: calc(var(--k) * 1); right: 0; display: grid; align-content: center; gap: calc(var(--k) * 1.1);
  background: #fff; border: 1px solid var(--slate-200); border-right: 0; border-radius: calc(var(--k) * .5) 0 0 calc(var(--k) * .5);
  padding: calc(var(--k) * .7) calc(var(--k) * .55); box-shadow: -1px 0 3px rgba(0,0,0,.05); }
.c-side svg { width: calc(var(--k) * 1.5); height: calc(var(--k) * 1.5); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-side .is-food { stroke: #e5352b; } .c-side .is-drink { stroke: #2f86cc; }