/* ══════════════════════════════════════════════════════════════════
   FIRST STEP — token del design system v1.0 (fonte: Brand/design-system/tokens.css)
   Font: stack di sistema. Il design system dichiara Poppins/Inter con fallback
   system-ui: qui NON carichiamo Google Fonts perché (a) è una richiesta a un
   server terzo = trasferimento IP senza consenso, incoerente con un sito che
   vende conformità GDPR, e (b) costa ~300ms di render-blocking.
   Per avere Poppins/Inter davvero: self-hostare i .woff2 e aggiungere @font-face qui.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --fs-purple-50:#F5F1FE; --fs-purple-100:#ECE2FD; --fs-purple-200:#D6BCFA;
  --fs-purple-400:#A855F7; --fs-purple-600:#7C3AED; --fs-purple-700:#6926C9;
  --fs-purple-800:#5B21B6; --fs-purple-900:#44177F;
  --fs-coral-500:#FB7165; --fs-coral-600:#E8533F;
  --fs-ink:#1E1B2E; --fs-gray-700:#3F3A52; --fs-gray-600:#6B6580;
  --fs-gray-300:#C9C4D6; --fs-gray-200:#E9E3F5; --fs-gray-100:#F3EFFA; --fs-gray-50:#FAF8FF;
  --fs-white:#FFFFFF; --fs-lavanda:#F3ECFE; --fs-success:#16A34A;

  --fs-color-bg:var(--fs-gray-50); --fs-color-surface:var(--fs-white);
  --fs-color-surface-alt:var(--fs-lavanda); --fs-color-text:var(--fs-ink);
  --fs-color-text-muted:var(--fs-gray-600); --fs-color-border:var(--fs-gray-200);
  --fs-color-primary:var(--fs-purple-600); --fs-color-primary-hover:var(--fs-purple-700);
  --fs-gradient-brand:linear-gradient(150deg,#2A1259 0%,#5B21B6 55%,#7C3AED 100%);

  --fs-font-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-space-2:.5rem; --fs-space-3:.75rem; --fs-space-4:1rem; --fs-space-6:1.5rem;
  --fs-space-8:2rem; --fs-space-12:3rem; --fs-space-16:4rem; --fs-space-20:5rem;
  --fs-container:1080px;
  --fs-radius-md:12px; --fs-radius-lg:16px; --fs-radius-xl:20px;
  --fs-radius-2xl:28px; --fs-radius-full:999px;
  --fs-shadow-sm:0 1px 2px rgba(30,27,46,.06);
  --fs-shadow-md:0 4px 16px rgba(91,33,182,.08);
  --fs-shadow-lg:0 12px 32px rgba(91,33,182,.12);
  --fs-shadow-focus:0 0 0 3px rgba(124,58,237,.35);
  --fs-transition:180ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--fs-color-bg);color:var(--fs-color-text);
  font-family:var(--fs-font-body);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--fs-font-display);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:var(--fs-color-primary)}
:focus-visible{outline:3px solid var(--fs-purple-600);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--fs-white);
  color:var(--fs-ink);padding:.75rem 1.25rem;border-radius:0 0 var(--fs-radius-md) 0;font-weight:600}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--fs-container);margin-inline:auto;padding-inline:1.25rem}
.section{padding-block:var(--fs-space-20)}
@media (max-width:640px){.section{padding-block:3.25rem}}
.section--soft{background:var(--fs-color-surface-alt)}
.section--surface{background:var(--fs-color-surface)}
.section--brand{background:var(--fs-gradient-brand);color:#fff}
.section--brand h2{color:#fff}
.center{text-align:center}
.eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fs-purple-700);margin:0 0 .75rem}
.section--brand .eyebrow{color:var(--fs-purple-200)}
h2{font-size:clamp(1.75rem,4.2vw,2.25rem)}
h3{font-size:1.1875rem}
.lead{font-size:1.125rem;color:var(--fs-color-text-muted);margin-top:.875rem;
  max-width:38rem;line-height:1.55}
.center .lead{margin-inline:auto}
.section--brand .lead{color:rgba(255,255,255,.9)}
.mt-8{margin-top:var(--fs-space-8)}
.mt-12{margin-top:var(--fs-space-12)}

/* ── Bottoni ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--fs-font-body);font-weight:600;font-size:1rem;
  padding:.9rem 1.6rem;min-height:52px;border-radius:var(--fs-radius-full);
  border:2px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform var(--fs-transition),box-shadow var(--fs-transition),background var(--fs-transition);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--fs-color-primary);color:#fff;box-shadow:var(--fs-shadow-md)}
.btn--primary:hover{background:var(--fs-color-primary-hover);box-shadow:var(--fs-shadow-lg)}
.btn--invert{background:#fff;color:var(--fs-purple-800);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.btn--invert:hover{background:var(--fs-purple-50)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--outline{background:transparent;color:var(--fs-purple-700);border-color:var(--fs-gray-300)}
.btn--outline:hover{border-color:var(--fs-purple-600);background:var(--fs-purple-50)}
.btn--sm{padding:.6rem 1.15rem;min-height:44px;font-size:.9375rem}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:var(--fs-space-8)}
.center .btn-row,.btn-row.center{justify-content:center}
.micro{font-size:.875rem;color:var(--fs-color-text-muted);margin-top:.875rem}
.section--brand .micro{color:rgba(255,255,255,.78)}
.wa-icon{width:20px;height:20px;flex:none;fill:currentColor}

/* ── Header (30/09/2026): pillola flottante, come matteomosca.it ──
   .hdr è fixed e trasparente, sopra l'hero; la pillola .hdr__in ha
   un alone viola sfumato intorno, come se emergesse dallo schermo.
   Essendo fixed non occupa spazio: l'hero ha già il padding in alto. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:200;padding:.75rem .75rem 0;pointer-events:none}
/* Il binario tiene la pillola allineata a destra: quando da pallino diventa
   barra, cresce verso sinistra ("si allunga"). */
.hdr__rail{max-width:calc(var(--fs-container) - 1rem);margin-inline:auto;display:flex;justify-content:flex-end}
.hdr__in{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:60px;height:60px;width:100%;max-width:none;margin:0;overflow:visible;
  padding:.45rem .5rem .45rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(124,58,237,.16);
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,
             0 10px 34px -10px rgba(124,58,237,.55),
             0 0 70px -14px rgba(168,85,247,.55);
  transition:width .55s cubic-bezier(.65,0,.25,1),height .55s cubic-bezier(.65,0,.25,1),min-height .55s cubic-bezier(.65,0,.25,1),
             padding .55s cubic-bezier(.65,0,.25,1),box-shadow var(--fs-transition),background var(--fs-transition)}
.hdr__in>*:not(.hdr__dot){transition:opacity .3s ease .25s}
/* ── Stato "pallino" (30/09/2026): nell'hero la nav si riduce a un cerchio con
   l'hamburger in alto a destra. Scorrendo oltre l'hero si allunga e torna barra.
   Il JS mette/toglie .is-dot su .hdr; senza JS la classe resta... e il pallino
   apre comunque la barra al click (fallback: vedi script). */
.hdr__dot{display:none}
.hdr.is-dot .hdr__in{width:56px;min-height:56px;height:56px;padding:0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,0 10px 30px -8px rgba(124,58,237,.6),0 0 60px -10px rgba(168,85,247,.6)}
.hdr.is-dot .hdr__in>*:not(.hdr__dot){opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}
.hdr.is-dot .hdr__dot{display:grid}
.hdr__dot{position:absolute;inset:0;place-items:center;background:none;border:0;border-radius:999px;cursor:pointer;
  color:var(--fs-ink);padding:0}
.hdr__dot svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hdr__dot:focus-visible{outline:2px solid var(--fs-purple-600);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hdr__in,.hdr__in>*{transition:none!important}}
/* Scrollando l'alone si intensifica un po' e il fondo diventa più pieno */
.hdr.is-stuck .hdr__in{background:rgba(255,255,255,.93);
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,
             0 14px 40px -12px rgba(124,58,237,.6),
             0 0 90px -16px rgba(168,85,247,.6)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--fs-ink);
  font-family:var(--fs-font-display);font-weight:700;font-size:1.125rem;letter-spacing:-.01em}
.brand svg.logo{height:26px;width:auto;flex:none;display:block}
@media (min-width:900px){.brand svg.logo{height:30px}}
.ftr .brand svg.logo{height:34px}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{color:var(--fs-gray-700);text-decoration:none;font-weight:500;font-size:.9375rem}
.nav a:hover{color:var(--fs-purple-700)}
/* La CTA dentro la nav esiste solo per il menu aperto su mobile: su desktop
   la CTA visibile è quella in .hdr__cta, altrimenti se ne vedono due. */
.nav .btn{display:none}
.hdr__cta{display:flex;align-items:center;gap:.6rem}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--fs-ink);border-radius:999px}
.burger svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:block}
  .hdr__cta .btn{display:none}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:calc(100% + .5rem);background:var(--fs-white);
    border:1px solid rgba(124,58,237,.16);border-radius:28px;
    box-shadow:0 18px 50px -14px rgba(124,58,237,.5);padding:.5rem 1.25rem 1.25rem}
  .nav.is-open a{padding:.9rem 0;border-bottom:1px solid var(--fs-gray-100);font-size:1.0625rem}
  .hdr__in{padding-left:.9rem}
  .nav.is-open .btn{display:flex;margin-top:1rem;color:#fff;border-bottom:0;justify-content:center}
}

/* ══ HERO SCROLL-DRIVEN — dal wireframe al sito ═══════════════════
   Lo scrub sullo scroll è disattivato (30/09/2026): --p resta fisso a 1,
   cioè il mockup è sempre il sito finito. Le regole su --p/--ka/--kk sono
   rimaste perché a 1 danno lo stato finale; il JS non tocca più --p.
   Il brand mostrato (ACME) è fittizio: è un mockup, non un cliente.
   ══════════════════════════════════════════════════════════════ */
/* --a = tinta del mockup. Registrata come colore così può essere *animata*:
   senza @property il cambio sarebbe uno scatto secco. Nota: non si può usare
   una transition sul background di quegli elementi, perché il loro background
   dipende anche da --kk che cambia a ogni frame di scroll — la transizione
   lo farebbe strisciare. Animando la variabile, invece, lo scrub resta pulito. */
@property --a{syntax:"<color>";inherits:true;initial-value:#7C3AED}

.bx{
  --p:1; --i:0;
  --a:var(--fs-purple-600); transition:--a .55s ease;
  --ka:clamp(0, calc((var(--p) - var(--i)*.035)/.15), 1);
  --kk:clamp(0, calc((var(--p) - .34 - var(--i)*.055)/.2), 1);
  --kp:clamp(0, calc((var(--p) - .8)/.2), 1);
  position:relative;background:#2A1259;
}

.bx__stage{background:var(--fs-gradient-brand);color:#fff;position:relative;overflow:hidden;
  min-height:100vh;display:flex;align-items:center;padding-block:calc(84px + 1.25rem) 2rem}
/* Con la nav a pallino l'hero parte subito in alto */
.bx .bx__stage{padding-top:1.5rem}
.bx__stage::after{content:"";position:absolute;inset:auto -12% -55% auto;width:66%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(168,85,247,.45),transparent 68%);pointer-events:none}
.bx__grid{position:relative;z-index:1;width:100%;display:grid;align-items:center;
  gap:clamp(1.25rem,3.5vw,3rem)}


.badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);color:#fff;font-size:.8125rem;font-weight:600;
  padding:.42rem .95rem;border-radius:var(--fs-radius-full)}
.bx h1{font-size:clamp(1.95rem,5.2vw,3rem);margin-top:1.1rem;color:#fff}
.bx h1 .l{display:block}
/* La riga che ruota è un blocco a sé: così il cambio di larghezza non muove
   nient'altro, e la virgola viaggia insieme alla parola. 1.3em di altezza
   serve a non tagliare le discendenti di "agenzia" e "palestra". */
/* Colore fisso, lilla del brand: stacca dal bianco del resto del titolo e tiene
   il contrasto su tutta l'estensione del gradiente. Il colore che cambia è
   quello del mockup, non quello della parola. */
.rot{display:block;overflow:hidden;height:1.3em;margin-block:-.075em;
  color:var(--fs-purple-200)}
/* display:block obbligatorio: su uno span inline il transform non si applica
   e lo scorrimento non avviene, in silenzio. */
.rot__in{display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rot__in b{display:block;height:1.3em;line-height:1.3em;font-weight:inherit;white-space:nowrap}
/* Slot a larghezza variabile (JS): segue la parola visibile */
.rot--fit{transition:width .5s cubic-bezier(.2,.8,.2,1)}
.rot--fit .rot__in b{text-align:left!important}
.bx__lead{font-size:clamp(1rem,2.3vw,1.15rem);color:rgba(255,255,255,.92);
  margin-top:1.05rem;max-width:32rem;line-height:1.55}
.bx .btn-row{margin-top:1.6rem}
.bx .micro{color:rgba(255,255,255,.88)}
/* Su desktop la colonna è stretta e servono tre righe, quindi .row1 resta un
   blocco e "Il sito per" sta per conto suo. Su mobile diventa una riga sola
   in flex, con "Il sito per" fermo accanto alla parola che scorre. */
.row1{display:block}

/* Stagger: ogni elemento del mockup ricalcola i propri progressi sul suo --i */
.el{--ka:clamp(0, calc((var(--p) - var(--i)*.035)/.15), 1);
    --kk:clamp(0, calc((var(--p) - .34 - var(--i)*.055)/.2), 1);
    opacity:var(--ka)}

/* ── Il "device" ─────────────────────────────────────────────── */
.bx__dev{position:relative;width:100%;max-width:520px;margin-inline:auto}
@media (max-width:899px){.bx__dev{max-width:400px}}
.dev{--wf:#D2CBE2;--wf2:#E6E1F0;
  border-radius:14px;overflow:hidden;
  background:color-mix(in srgb,#FFFFFF calc(var(--kp)*100%), var(--wf2));
  box-shadow:0 calc(8px + 26px*var(--kp)) calc(18px + 44px*var(--kp)) rgba(10,4,30,calc(.16 + .3*var(--kp)));
  transform:scale(calc(.965 + .035*var(--kp)))}
.dev__bar{display:flex;align-items:center;gap:.28rem;padding:.5rem .6rem;
  background:color-mix(in srgb,var(--fs-gray-100) calc(var(--kp)*100%), var(--wf2))}
.dev__bar .dot{width:7px;height:7px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--fs-gray-300) calc(var(--kp)*100%), var(--wf))}
.dev__url{margin-left:.4rem;font-size:.6875rem;letter-spacing:.01em}
.dev__vp{background:color-mix(in srgb,#FFFFFF calc(var(--kk)*100%), var(--wf2))}

/* ── .ln : la barra placeholder che si trasforma in testo vero ── */
.ln{--lnc:var(--fs-ink);display:inline-block;border-radius:5px;line-height:1.35;
  padding:.05em .32em;margin:-.05em -.32em;
  background:color-mix(in srgb, transparent calc(var(--kk)*100%), var(--wf));
  color:color-mix(in srgb, var(--lnc) calc(var(--kk)*100%), transparent)}

/* ── Mockup: navbar ──────────────────────────────────────────── */
.mk-nav{display:flex;align-items:center;gap:.45rem;padding:.6rem .7rem;
  border-bottom:1px solid color-mix(in srgb,var(--fs-gray-200) calc(var(--kk)*100%), var(--wf))}
.mk-logo{width:18px;height:18px;border-radius:6px;flex:none;
  background:color-mix(in srgb,var(--a) calc(var(--kk)*100%), var(--wf))}
.mk-brand{font-family:var(--fs-font-display);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;white-space:nowrap}
.mk-links{display:flex;gap:.35rem;margin-left:auto}
.mk-links i{display:block;width:24px;height:6px;border-radius:3px;
  background:color-mix(in srgb,var(--fs-gray-300) calc(var(--kk)*100%), var(--wf))}
.mk-cta{width:50px;height:18px;border-radius:999px;flex:none;
  background:color-mix(in srgb,var(--a) calc(var(--kk)*100%), var(--wf))}

/* ── Mockup: blocco hero ─────────────────────────────────────── */
.mk-hero{position:relative;isolation:isolate;background:var(--wf);overflow:hidden;
  padding:1.5rem 1rem 1.65rem;display:flex;flex-direction:column;align-items:center;
  gap:.42rem;text-align:center}
.mk-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--kk);
  background:linear-gradient(150deg,color-mix(in srgb,var(--a) 42%,#17102E),var(--a))}
.mk-hero .ln{--lnc:#fff}
.mk-h1{font-family:var(--fs-font-display);font-weight:700;
  font-size:clamp(.95rem,3.1vw,1.3rem);white-space:nowrap}
.mk-sub{font-size:.7rem;white-space:nowrap}
.mk-btn{margin-top:.45rem;padding:.38rem .85rem;border-radius:999px;
  background:color-mix(in srgb,#FFFFFF calc(var(--kk)*100%), var(--wf))}
.mk-btn .ln{--lnc:color-mix(in srgb,var(--a) 76%,#000);font-size:.68rem;
  font-weight:700;background:none;white-space:nowrap}

/* ── Mockup: card ────────────────────────────────────────────── */
.mk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.7rem}
.mk-card{border-radius:9px;padding:.4rem;
  background:color-mix(in srgb,#FFFFFF calc(var(--kk)*100%), var(--wf2));
  border:1px solid color-mix(in srgb,var(--fs-gray-200) calc(var(--kk)*100%), var(--wf))}
.mk-ph{display:block;aspect-ratio:4/3;border-radius:5px;background:var(--wf);
  position:relative;overflow:hidden}
.mk-ph::before{content:"";position:absolute;inset:0;opacity:var(--kk);
  background:linear-gradient(140deg,color-mix(in srgb,var(--a) 62%,#FFF),
                                    color-mix(in srgb,var(--a) 74%,#000))}
.mk-ph::after{content:"";position:absolute;inset:0;opacity:calc(1 - var(--kk));
  background:
    linear-gradient(to top right,transparent 47.5%,#B7AECC 47.5%,#B7AECC 52.5%,transparent 52.5%),
    linear-gradient(to bottom right,transparent 47.5%,#B7AECC 47.5%,#B7AECC 52.5%,transparent 52.5%)}
.mk-card i{display:block;height:5px;border-radius:3px;margin-top:.35rem;
  background:color-mix(in srgb,var(--fs-gray-300) calc(var(--kk)*100%), var(--wf))}
.mk-card i.s{width:58%}
.mk-foot{height:26px;background:color-mix(in srgb,var(--fs-ink) calc(var(--kk)*100%), var(--wf))}


/* ── Compattazione: lo stage deve stare in 100vh anche sui telefoni ── */
@media (max-width:899px){
  /* Mobile: tutto centrato e titolo su due righe. La misura è vincolata dalla
     riga più lunga, "Il sito per il tuo ristorante,": a 5,5vw non va mai a capo
     nemmeno su uno schermo da 320px. */
  .bx__stage{padding-block:1.4rem 1.25rem;align-items:flex-start}
  .bx__grid{gap:1.1rem}
  .bx__copy{text-align:center}
  .bx h1{font-size:clamp(1.05rem,5.5vw,2.4rem);margin-top:.85rem}
  /* "Il sito per" resta immobile: il contenitore della parola tiene una larghezza
     fissa, quella della categoria più lunga, e ogni parola si centra dentro.
     È l'unico modo per avere insieme riga centrata e prefisso che non balla. */
  .row1{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
        gap:0 .3em;margin-top:-.075em}
  .bx h1 .l--pre{line-height:1.3}
  .rot{margin-block:0;flex:none}
  .rot__in b{text-align:center}
  .bx__lead{font-size:.9688rem;margin-top:.8rem;margin-inline:auto}
  .bx .btn-row{margin-top:1.15rem;justify-content:center}
  .bx .btn-row .btn--ghost{display:none}      /* "Guarda i lavori" resta nel menu */
  .bx .micro{display:none}                    /* su mobile non c'è spazio */
  /* Finestra quasi a tutta larghezza: 12px di margine per lato (30/09/2026) */
  .bx__dev{max-width:560px;width:calc(100% + 1rem);margin-inline:-.5rem}
  .bx__grid>.bx__dev{justify-self:center}
  .mk-links{display:none}   /* il device è stretto: i nomi lunghi sfonderebbero la nav */
  .mk-hero{padding:1rem .8rem 1.15rem}
  .mk-cards{padding:.5rem;gap:.4rem}
  .mk-foot{height:18px}
}
/* Su schermi alti il contenuto è più corto dei 100vh dello stage: centrandolo,
   il vuoto si divide sopra e sotto invece di accumularsi tutto in fondo. */
@media (max-width:899px) and (min-height:750px){
  .bx .bx__stage{align-items:center}
}
/* Su schermi bassi vale l'opposto: si toglie il superfluo e si rimpicciolisce
   il device, altrimenti il fondo viene tagliato. */
@media (min-width:900px) and (max-height:749px){
  .bx__dev{max-width:min(400px,62vw)}
}
@media (max-height:720px){
  .bx .micro{display:none}
}

/* Desktop (30/09/2026): stessa impostazione del telefono. Testo centrato in
   alto con l'H1 su due righe, finestra del sito sotto, larga. Misure tarate
   perché tutto (testi + finestra intera) stia in una schermata da ~800px. */
@media (min-width:900px){
  .bx__stage{align-items:flex-start;padding-block:1.6rem 0;min-height:0}
  .bx__grid{grid-template-columns:1fr;gap:1.4rem}
  .bx__copy{text-align:center;max-width:56rem;margin-inline:auto}
  .badge{font-size:.75rem;padding:.32rem .8rem}
  .bx h1{font-size:clamp(2.1rem,3.4vw,3rem);margin-top:.75rem}
  .row1{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:0 .3em;margin-top:-.075em}
  .bx h1 .l--pre{line-height:1.3}
  .rot{margin-block:0;flex:none}
  .rot__in b{text-align:center}
  .bx__lead{margin:.65rem auto 0;max-width:42rem;font-size:1.0625rem}
  .bx .btn-row{justify-content:center;margin-top:.95rem}
  .bx .micro{display:none}
  .bx__dev{max-width:1060px}
  .dev{border-radius:18px 18px 0 0}
  .dev__bar{padding:.45rem .85rem;gap:.35rem}
  .dev__bar .dot{width:9px;height:9px}
  .dev__url{font-size:.8125rem;margin-left:.6rem}
  .mk-nav{padding:.55rem 1.25rem;gap:.7rem}
  .mk-logo{width:24px;height:24px;border-radius:7px}
  .mk-brand{font-size:.95rem}
  .mk-links{gap:.7rem}
  .mk-links i{width:48px;height:7px}
  .mk-cta{width:96px;height:30px}
  .mk-hero{padding:1.2rem 2rem 1.35rem;gap:.35rem}
  .mk-h1{font-size:1.6rem}
  .mk-sub{font-size:.9rem}
  .mk-btn{margin-top:.45rem;padding:.55rem 1.3rem}
  .mk-btn .ln{font-size:.9rem}
  .mk-cards{padding:.85rem 1.25rem;gap:1rem}
  .mk-card{padding:.6rem;border-radius:12px}
  .mk-ph{aspect-ratio:12/5;border-radius:8px}
  .mk-card i{height:7px;margin-top:.5rem}
  .mk-foot{height:20px}
}
/* Schermi desktop bassi (portatili 768–820px): card del mockup più basse */
@media (min-width:900px) and (max-height:820px){
  .bx__dev{max-width:920px}
  .mk-ph{aspect-ratio:10/3}
  .mk-hero{padding:1rem 2rem 1.1rem}
}

/* Fallback: senza color-mix mostriamo direttamente lo stato finale */
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .bx{--p:1}
}

/* ── Trust strip ─────────────────────────────────────────────── */
.trust{background:var(--fs-white);border-bottom:1px solid var(--fs-color-border)}
.trust ul{list-style:none;margin:0;padding:1.25rem 0;display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.trust li{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.9375rem}
.tick{width:22px;height:22px;flex:none;border-radius:50%;background:var(--fs-purple-50);
  color:var(--fs-purple-700);display:grid;place-items:center;font-size:.75rem;font-weight:700}

/* ── Griglie e card ──────────────────────────────────────────── */
.grid{display:grid;gap:1.25rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--fs-color-surface);border:1px solid var(--fs-color-border);
  border-radius:var(--fs-radius-xl);padding:1.6rem;box-shadow:var(--fs-shadow-sm)}
.card--hover{transition:transform var(--fs-transition),box-shadow var(--fs-transition)}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--fs-shadow-lg)}
.card h3{margin-top:.9rem}
.card p{color:var(--fs-color-text-muted);margin-top:.5rem;font-size:.9688rem}
.num{width:44px;height:44px;border-radius:var(--fs-radius-md);background:var(--fs-purple-50);
  color:var(--fs-purple-700);display:grid;place-items:center;
  font-family:var(--fs-font-display);font-weight:700;font-size:1.25rem}
.ico{width:44px;height:44px;border-radius:var(--fs-radius-md);background:var(--fs-purple-50);
  display:grid;place-items:center;font-size:1.35rem;line-height:1}
.ico svg{width:23px;height:23px;fill:none;stroke:var(--fs-purple-700);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* Sezione "Perché ti serve" (30/09/2026): niente card. Quattro colonne
   editoriali su una riga (desktop), ognuna aperta da una riga sottile con
   un segmento viola, numero grande e icona. Su telefono diventano righe con
   il numero a sinistra. Deve distinguersi dalle card del resto della pagina. */
.why{list-style:none;margin:3.25rem 0 0;padding:0;display:grid;gap:0}
.why__it{position:relative;padding:1.4rem 0 1.5rem;border-top:1px solid var(--fs-purple-100)}
.why__it::before{content:"";position:absolute;top:-2px;left:0;width:48px;height:3px;
  border-radius:999px;background:var(--fs-purple-600)}
.why__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.why__n{font-family:var(--fs-font-display);font-weight:600;font-size:2.75rem;line-height:1;
  letter-spacing:-.04em;color:var(--fs-purple-200)}
.why .ico{width:40px;height:40px;border-radius:999px}
.why .ico svg{width:20px;height:20px}
.why h3{font-size:1.125rem;margin-top:1.1rem}
.why p{color:var(--fs-color-text-muted);margin-top:.55rem;font-size:.9688rem;line-height:1.6}
@media (min-width:900px){
  .why{grid-template-columns:repeat(4,1fr);gap:2.25rem}
  .why__it{padding-bottom:0}
}
@media (max-width:899px){
  /* Telefono: numero in colonna a sinistra, testo a destra */
  .why__it{display:grid;grid-template-columns:3.1rem 1fr;column-gap:.9rem;padding:1.25rem 0}
  .why__it:last-child{border-bottom:1px solid var(--fs-purple-100)}
  .why__top{grid-row:1 / span 2;flex-direction:column;align-items:flex-start;
    justify-content:flex-start;align-self:start;gap:.7rem}
  .why__n{font-size:2.1rem}
  .why .ico{width:34px;height:34px}
  .why .ico svg{width:18px;height:18px}
  .why h3{margin-top:0;grid-column:2}
  .why p{grid-column:2;margin-top:.4rem}
}

/* ── Portfolio ───────────────────────────────────────────────── */
/* Rail orizzontale: una card alla volta, scroll-snap nativo.
   Senza JS funziona lo stesso (swipe / trackpad / frecce da tastiera):
   le frecce compaiono solo se il JS ha aggiunto .rail--js. */
.works{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block:.25rem .5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.works::-webkit-scrollbar{display:none}
.works>.work{flex:0 0 300px;scroll-snap-align:start}
@media (max-width:640px){
  /* le card sbordano fino al bordo schermo: si capisce che ce n'è dell'altro */
  .works{margin-inline:-1.25rem;padding-inline:1.25rem;scroll-padding-inline:1.25rem}
  .works>.work{flex-basis:82vw;max-width:340px}
}
.rail__nav{display:none;gap:.5rem;justify-content:flex-end;margin-top:.85rem}
.rail--js .rail__nav{display:flex}
@media (max-width:640px){.rail--js .rail__nav{display:none}}
.rail__btn{width:44px;height:44px;border-radius:var(--fs-radius-full);flex:none;
  background:var(--fs-white);border:1px solid var(--fs-color-border);cursor:pointer;
  display:grid;place-items:center;color:var(--fs-purple-700);box-shadow:var(--fs-shadow-sm);
  transition:background var(--fs-transition),border-color var(--fs-transition)}
.rail__btn:hover{border-color:var(--fs-purple-600);background:var(--fs-purple-50)}
.rail__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rail__hint{font-size:.8125rem;color:var(--fs-color-text-muted);margin-top:.6rem;text-align:center}
@media (min-width:641px){.rail__hint{display:none}}
.work{background:var(--fs-white);border:1px solid var(--fs-color-border);
  border-radius:var(--fs-radius-xl);overflow:hidden;box-shadow:var(--fs-shadow-sm);
  transition:transform var(--fs-transition),box-shadow var(--fs-transition);
  display:flex;flex-direction:column}
.work:hover{transform:translateY(-3px);box-shadow:var(--fs-shadow-lg)}
.work__frame{background:var(--fs-gray-100);padding:.5rem .6rem 0}
.work__dots{display:flex;gap:.28rem;padding-bottom:.5rem}
.work__dots i{width:8px;height:8px;border-radius:50%;background:var(--fs-gray-300);display:block}
/* Anteprima renderizzata in CSS coi colori veri del brand cliente.
   Quando hai gli screenshot: sostituisci .work__shot con <img src="..." alt="..."> */
.work__shot{aspect-ratio:16/10;background:var(--brand-bg);display:grid;place-content:center;
  text-align:center;padding:1rem;gap:.4rem;position:relative;overflow:hidden}
.work__shot::before{content:"";position:absolute;inset:auto -20% -60% auto;width:80%;aspect-ratio:1;
  border-radius:50%;background:var(--brand-glow);opacity:.55}
.work__shot b,.work__shot span{position:relative;z-index:1}
.work__shot b{font-family:var(--fs-font-display);font-size:1.0625rem;color:var(--brand-fg);
  letter-spacing:.02em;line-height:1.2}
.work__shot span{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-accent);font-weight:700}
/* Griglia lavori: 2 colonne da tablet in su, 1 su telefono */
.works-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;max-width:70rem;margin-inline:auto}
@media (min-width:641px){.works-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.work__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;
  background:var(--fs-gray-100)}
.work__body{padding:1.05rem 1.15rem 1.25rem;flex:1;display:flex;flex-direction:column}
.work__body h3{font-size:1.0625rem}
.work__meta{font-size:.8125rem;color:var(--fs-color-text-muted);margin-top:.2rem}
.work__body p{font-size:.9375rem;color:var(--fs-gray-700);margin-top:.6rem;flex:1}
.work__link{margin-top:.9rem;font-size:.875rem;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:.3rem}
.work__link:hover{text-decoration:underline}
.pill{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.2rem .55rem;border-radius:var(--fs-radius-full);
  background:var(--fs-purple-50);color:var(--fs-purple-700);margin-top:.9rem;align-self:flex-start}
.pill--live{background:#EAF7EE;color:#15803D}

/* ── Benefici ────────────────────────────────────────────────── */
.benefits{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.benefit{display:flex;gap:.9rem;align-items:flex-start}
.benefit h3{font-size:1.0313rem}
.benefit p{font-size:.9375rem;color:var(--fs-color-text-muted);margin-top:.25rem}

/* ── Prezzo ──────────────────────────────────────────────────── */
.price{max-width:440px;margin:var(--fs-space-8) auto 0;background:var(--fs-white);
  border:2px solid var(--fs-color-primary);border-radius:var(--fs-radius-2xl);
  padding:2rem 1.75rem;box-shadow:var(--fs-shadow-lg);text-align:center}
.price__badge{display:inline-block;background:var(--fs-purple-50);color:var(--fs-purple-700);
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .85rem;border-radius:var(--fs-radius-full)}
.price__amt{font-family:var(--fs-font-display);font-weight:700;font-size:3.5rem;
  line-height:1;margin-top:.9rem}
.price__amt span{font-size:1.125rem;font-weight:500;color:var(--fs-color-text-muted)}
.price__sub{font-size:.9375rem;color:var(--fs-color-text-muted);margin-top:.5rem}
.price ul{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;
  gap:.7rem;text-align:left}
.price li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9688rem}
.price li b{color:var(--fs-success);flex:none;font-size:1rem;line-height:1.5}
/* ── Ancoraggio: prima il box degli altri, poi il nostro ─────
   Il box grigio è etichettato «Le altre agenzie» in modo che nessuno
   scambi 800–3.000€ per il prezzo di First Step. Quando entra a schermo
   una sbarra corallo lo taglia e il box arretra: senza JS resta fermo e
   leggibile, l'etichetta regge il senso da sola. */
.vs{margin-top:var(--fs-space-8)}
.vs__old{position:relative;max-width:440px;margin-inline:auto;overflow:hidden;
  background:var(--fs-gray-100);border:2px dashed var(--fs-gray-300);
  border-radius:var(--fs-radius-2xl);padding:1.75rem 1.75rem 1.5rem;text-align:center;
  color:var(--fs-gray-600);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.vs__tag{display:inline-block;background:var(--fs-gray-300);color:var(--fs-gray-700);
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .85rem;border-radius:var(--fs-radius-full)}
.vs__amt{font-family:var(--fs-font-display);font-weight:700;font-size:2.5rem;
  line-height:1;margin-top:.9rem;color:var(--fs-gray-600)}
.vs__sub{font-size:.9375rem;margin-top:.5rem}
.vs__old ul{list-style:none;margin:1.35rem 0 0;padding:0;display:flex;
  flex-direction:column;gap:.6rem;text-align:left;font-size:.9375rem}
.vs__old li{display:flex;gap:.6rem;align-items:flex-start}
.vs__old li b{flex:none;font-size:1rem;line-height:1.5;color:var(--fs-gray-600)}
.vs__arrow{text-align:center;font-size:1.75rem;line-height:1;
  color:var(--fs-purple-400);margin:1.1rem 0 .35rem}
.vs .price{margin-top:0}

/* ── La frantumazione ────────────────────────────────────────
   Stessa grammatica dell'hero: il JS aggiorna una sola variabile,
   --q da 0 a 1, e tutto il resto è CSS. Il box degli altri si spacca
   in 9 pezzi che si staccano sfalsati e volano via; sotto emerge il
   nostro. I due box sono impilati nella stessa cella di griglia, così
   nessuno dei due lascia un buco quando sparisce.

   Senza JS, con prefers-reduced-motion o su rete lenta la classe
   .vs--live non viene mai messa: restano due box uno sotto l'altro
   con la freccia in mezzo, statici e leggibili. Nessun contenuto
   vive solo dentro l'animazione. */
.vs{--q:0}
.vsw--live{min-height:165vh}
/* Lo stage è alto quanto il suo contenuto, non 100vh: appeso poco sotto
   l'header riduce il vuoto sopra e sotto ai box. Riga 1 i due titoli,
   riga 2 i due box: entrambe le coppie condividono la cella, così a
   sfumare è solo l'opacità e niente si sposta. */
.vs--live{position:sticky;top:calc(76px + .75rem);
  display:grid;justify-items:center;align-content:start}
.vs--live>.vs__head{grid-area:1/1;width:100%;margin:0 auto 1rem}
.vs--live>.vs__old,.vs--live>.price{grid-area:2/1;width:100%}
.vs--live .vs__arrow{display:none}
@media (max-height:720px){.vs--live{top:calc(76px + .25rem)}}
/* i frammenti danno il colore al box: il contenitore diventa trasparente */
.vs--live .vs__old{background:transparent;border-color:transparent}

.vs__frag{display:none}
.vs--live .vs__frag{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
.vs__frag i{position:absolute;inset:0;display:block;
  background:var(--fs-gray-200);border-radius:var(--fs-radius-2xl);
  /* ogni pezzo ha il suo progresso, sfalsato sul ritardo --d */
  --k:clamp(0, calc((var(--q) - var(--d))/.42), 1);
  transform:translate(calc(var(--tx)*var(--k)*1%), calc(var(--ty)*var(--k)*1%))
            rotate(calc(var(--rz)*var(--k)*1deg))
            scale(calc(1 - .14*var(--k)));
  opacity:calc(1 - var(--k)*var(--k))}
/* Le 9 clip-path condividono i vertici: a --q 0 il rettangolo è integro. */
.vs__frag i:nth-child(1){clip-path:polygon(0% 0%,34% 0%,30% 34%,0% 29%)}
.vs__frag i:nth-child(2){clip-path:polygon(34% 0%,69% 0%,72% 26%,30% 34%)}
.vs__frag i:nth-child(3){clip-path:polygon(69% 0%,100% 0%,100% 31%,72% 26%)}
.vs__frag i:nth-child(4){clip-path:polygon(0% 29%,30% 34%,38% 68%,0% 63%)}
.vs__frag i:nth-child(5){clip-path:polygon(30% 34%,72% 26%,66% 61%,38% 68%)}
.vs__frag i:nth-child(6){clip-path:polygon(72% 26%,100% 31%,100% 69%,66% 61%)}
.vs__frag i:nth-child(7){clip-path:polygon(0% 63%,38% 68%,41% 100%,0% 100%)}
.vs__frag i:nth-child(8){clip-path:polygon(38% 68%,66% 61%,70% 100%,41% 100%)}
.vs__frag i:nth-child(9){clip-path:polygon(66% 61%,100% 69%,100% 100%,70% 100%)}

/* I due titoli sopra i box. In modalità statica ognuno sta sopra il suo,
   in modalità live si scambiano nella stessa cella insieme ai box. */
.vs__head{font-family:var(--fs-font-display);font-weight:700;
  font-size:clamp(1.05rem,4.4vw,1.375rem);line-height:1.25;text-align:center;
  color:var(--fs-ink);max-width:22rem;margin:0 auto .9rem}
.vs__head--b{color:var(--fs-purple-700);margin-top:1.25rem}
.vs--live>.vs__head--a{opacity:clamp(0, calc((.44 - var(--q))/.20), 1)}
.vs--live>.vs__head--b{opacity:clamp(0, calc((var(--q) - .46)/.26), 1)}

/* il testo degli altri svanisce prima che i pezzi volino via */
.vs--live .vs__in{position:relative;z-index:1;
  opacity:clamp(0, calc((.44 - var(--q))/.22), 1)}

/* il nostro box entra dopo. visibility:hidden e non opacity:0 perché
   un link invisibile ma focalizzabile è una trappola da tastiera. */
.vs--live>.price{--r:clamp(0, calc((var(--q) - .46)/.26), 1);
  opacity:var(--r);transform:scale(calc(.93 + .07*var(--r)));
  visibility:hidden;pointer-events:none}
.vs--live.vs--open>.price{visibility:visible;pointer-events:auto}
.price__all{font-size:.9375rem;color:var(--fs-color-text-muted);margin-top:.75rem}
.price__all b{color:var(--fs-purple-700)}

/* ── "Cosa c'è dentro": tendina dentro il box prezzo ─────────── */
.incl{margin-top:1.25rem;border-top:1px solid var(--fs-color-border);text-align:left}
.incl summary{cursor:pointer;list-style:none;padding:1rem .15rem .15rem;
  font-family:var(--fs-font-display);font-weight:600;font-size:.9688rem;
  color:var(--fs-purple-700);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.incl summary::-webkit-details-marker{display:none}
.incl summary::after{content:"";width:9px;height:9px;flex:none;margin-right:.4rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--fs-transition)}
.incl[open] summary::after{transform:rotate(-135deg) translateY(1px)}
.incl__body{padding:.5rem .15rem .25rem}
.incl .benefits{grid-template-columns:1fr;gap:.95rem;margin-top:.4rem}
.incl .benefit h3{font-size:.9688rem}
.incl .benefit p{font-size:.875rem;margin-top:.15rem}
.incl .ico{width:38px;height:38px}
.incl .ico svg{width:20px;height:20px}
.incl ul{margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--fs-gray-100);gap:.55rem}
.incl li{font-size:.9375rem}

/* ── Tabella confronto ───────────────────────────────────────── */
.cmp{margin-top:var(--fs-space-8);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;min-width:600px;border-collapse:separate;border-spacing:0;
  background:var(--fs-white);border-radius:var(--fs-radius-xl);overflow:hidden;
  box-shadow:var(--fs-shadow-sm);font-size:.9375rem}
.cmp th,.cmp td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--fs-color-border)}
.cmp thead th{background:var(--fs-gray-100);font-family:var(--fs-font-display);font-size:.9375rem}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp .col-fs{background:var(--fs-purple-50);font-weight:600;color:var(--fs-purple-800)}
.cmp thead .col-fs{background:var(--fs-purple-600);color:#fff}
.cmp tbody th{font-weight:600;color:var(--fs-gray-700)}
/* La tabella resta una tabella anche sul telefono: table-layout fisso,
   testo più piccolo, colonne strette. Niente scroll orizzontale, niente
   card impilate — il confronto si legge tutto in una schermata. */
.cmp table{table-layout:fixed}
.cmp col.c-voce{width:34%}
.cmp col.c-fs{width:24%}
.cmp thead th{text-align:center;line-height:1.2}
.cmp thead th:first-child{text-align:left}
.cmp tbody td{text-align:center}
/* La colonna First Step si stacca: bordo laterale continuo e fondo pieno */
.cmp .col-fs{border-inline:2px solid var(--fs-purple-600)}
.cmp thead .col-fs{border-top:2px solid var(--fs-purple-600)}
.cmp tbody tr:last-child .col-fs{border-bottom:2px solid var(--fs-purple-600)}
@media (max-width:640px){
  .cmp table{min-width:0;font-size:.75rem}
  .cmp th,.cmp td{padding:.6rem .35rem}
  .cmp thead th{font-size:.75rem}
  .cmp tbody th{font-size:.75rem;line-height:1.25}
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq{max-width:44rem;margin:var(--fs-space-8) auto 0;display:flex;flex-direction:column;gap:.75rem}
.faq details{background:var(--fs-white);border:1px solid var(--fs-color-border);
  border-radius:var(--fs-radius-lg);overflow:hidden}
.faq details[open]{border-color:var(--fs-purple-200);box-shadow:var(--fs-shadow-md)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 3rem 1.1rem 1.25rem;
  font-family:var(--fs-font-display);font-weight:600;font-size:1.0313rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.25rem;top:1.45rem;width:9px;height:9px;
  border-right:2px solid var(--fs-purple-600);border-bottom:2px solid var(--fs-purple-600);
  transform:rotate(45deg);transition:transform var(--fs-transition)}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.6rem}
.faq .ans{padding:0 1.25rem 1.25rem;color:var(--fs-color-text-muted);font-size:.9688rem}

/* ── Footer ──────────────────────────────────────────────────── */
.ftr{background:var(--fs-ink);color:rgba(255,255,255,.72);padding-block:var(--fs-space-16) 0}
.ftr__top{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:720px){.ftr__top{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
.ftr .brand{color:#fff}
.ftr__pay{margin-top:.85rem;font-size:.9375rem;max-width:22rem}
/* Testo descrittivo del servizio: utile a chi legge e a Google (parole chiave naturali) */
.ftr__about{margin-top:.8rem;font-size:.875rem;line-height:1.65;max-width:30rem;color:rgba(255,255,255,.6)}
.ftr__about strong{color:rgba(255,255,255,.85);font-weight:600}
.ftr h3{color:#fff;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;
  font-family:var(--fs-font-body);font-weight:700}
.ftr ul{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.ftr a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.9375rem}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr__legal{margin-top:var(--fs-space-12);border-top:1px solid rgba(255,255,255,.14);
  padding-block:1.25rem 1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;
  font-size:.8125rem;align-items:center}
.ftr__legal :last-child{margin-left:auto}
@media (max-width:640px){.ftr__legal :last-child{margin-left:0}}

/* ── Barra CTA sticky mobile ─────────────────────────────────── */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:300;display:none;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--fs-color-border);box-shadow:0 -4px 20px rgba(30,27,46,.08)}
@media (max-width:860px){
  .mobar{display:block}
  body{padding-bottom:84px}
}
/* Mentre l'hero è a schermo la CTA è già lì: la barra si toglie di mezzo */
.mobar{transition:transform var(--fs-transition),opacity var(--fs-transition)}
body.bx-on .mobar{transform:translateY(130%);opacity:0;pointer-events:none}

/* "Come funziona" (30/09/2026): tre scene illustrate in CSS — telefono WhatsApp,
   sito in costruzione, sito online — collegate da un tratteggio. Niente card. */
.sc{list-style:none;margin:3.5rem 0 0;padding:0;display:grid;gap:2.5rem}
.sc__it{text-align:center}
.sc__art{position:relative;height:170px;display:grid;place-items:center;margin-bottom:1.1rem}
.sc__art::before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,var(--fs-purple-100) 0 60%,transparent 61%)}
.sc__n{position:absolute;top:6px;left:calc(50% - 88px);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--fs-purple-600);color:#fff;font-weight:700;font-family:var(--fs-font-display);font-size:.9rem;z-index:2}
.sc h3{font-size:1.2rem}
.sc p{color:var(--fs-color-text-muted);margin:.45rem auto 0;font-size:.9688rem;line-height:1.6;max-width:21rem}
/* scena 1: telefono con WhatsApp */
.ph{position:relative;width:78px;height:138px;border-radius:18px;background:#1f1a2e;padding:6px;transform:rotate(-6deg);
  box-shadow:0 16px 30px -12px rgba(40,20,90,.5)}
.ph>div{height:100%;border-radius:13px;background:#EFE7DD;padding:10px 6px;display:flex;flex-direction:column;gap:5px}
.ph i{display:block;height:12px;border-radius:7px;background:#D9FDD3;align-self:flex-end;width:80%}
.ph i:nth-child(2){width:55%}.ph i:nth-child(3){width:70%;background:#fff;align-self:flex-start}
.ph .wa{position:absolute;right:-14px;bottom:10px;width:34px;height:34px;border-radius:50%;background:#25D366;display:grid;place-items:center}
.ph .wa svg{width:19px;height:19px;fill:#fff}
/* scena 2: finestra in costruzione */
.bw{position:relative;width:150px;height:104px;border-radius:12px;background:#fff;box-shadow:0 16px 30px -12px rgba(40,20,90,.45);overflow:hidden}
.bw>i{display:block;height:14px;background:var(--fs-purple-50)}
.bw b{display:block;height:34px;margin:8px;border-radius:7px;background:linear-gradient(135deg,var(--fs-purple-400),var(--fs-purple-600))}
.bw u{display:flex;gap:6px;margin:0 8px}.bw u s{flex:1;height:26px;border-radius:5px;background:var(--fs-purple-100);text-decoration:none}
.bw u s:nth-child(3){background:repeating-linear-gradient(45deg,var(--fs-purple-100) 0 4px,#fff 4px 8px)}
/* scena 3: online */
.on{position:relative;width:150px;height:104px;border-radius:12px;background:#fff;box-shadow:0 16px 30px -12px rgba(22,120,60,.45);overflow:hidden}
.on>i{display:flex;align-items:center;gap:4px;height:18px;padding:0 7px;background:#F1F5F2;font-style:normal;font-size:.56rem;color:#3b4a40}
.on>i::before{content:"🔒"}
.on b{display:block;height:40px;margin:8px;border-radius:7px;background:linear-gradient(135deg,#7a2a24,#A83A32)}
.on em{position:absolute;right:8px;bottom:8px;font-style:normal;font-size:.65rem;font-weight:700;color:#166534;background:#DCFCE7;
  border-radius:999px;padding:.15rem .5rem;display:flex;align-items:center;gap:.25rem}
.on em::before{content:"";width:6px;height:6px;border-radius:50%;background:#16A34A}
@media (min-width:900px){
  .sc{grid-template-columns:repeat(3,1fr);gap:2rem}
  .sc__it{position:relative}
  .sc__it:not(:last-child)::after{content:"";position:absolute;top:85px;left:calc(50% + 105px);width:calc(100% - 210px + 2rem);height:2px;
    background:repeating-linear-gradient(90deg,var(--fs-purple-300,#C4A5F7) 0 7px,transparent 7px 14px)}
}

/* 09/10/2026 SEO/a11y: contrasto testo nel box «altre agenzie» (Lighthouse) */
.vs__old,.vs__old li b,.vs__amt{color:var(--fs-gray-700)}

/* ══ Pagine interne (genera_pagine.py) ══════════════════════════════ */
.phero{background:var(--fs-color-surface-alt);padding:8.5rem 0 3rem}
@media (max-width:640px){.phero{padding:6.75rem 0 2.25rem}}
.phero h1{font-size:clamp(2rem,6.5vw,3rem);max-width:44rem}
.phero .lead{max-width:40rem}
.crumbs{font-size:.875rem;color:var(--fs-color-text-muted);margin:0 0 1rem;padding:0;
  list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"›";margin-right:.35rem;color:var(--fs-gray-300)}
.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{text-decoration:underline}
.updated{font-size:.8125rem;color:var(--fs-color-text-muted);margin-top:1.25rem}
.prose{max-width:44rem;margin-inline:auto}
.prose h2{font-size:clamp(1.5rem,4.4vw,1.875rem);margin-top:3rem}
.prose h2:first-child{margin-top:0}
.about-intro{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:center}
.about-intro h2{margin-top:0}
.about-avatar{width:100%;height:auto;filter:drop-shadow(0 14px 22px rgba(91,33,182,.18))}
@media (max-width:640px){.about-intro{grid-template-columns:1fr;gap:1.25rem}.about-avatar{max-width:240px}}
.prose h3{margin-top:1.75rem}
.prose p{margin-top:1rem;color:var(--fs-gray-700)}
.prose ul,.prose ol{margin:1rem 0 0;padding-left:1.25rem;color:var(--fs-gray-700)}
.prose li{margin-top:.5rem}
.prose strong{color:var(--fs-ink)}
.box{background:var(--fs-white);border:1px solid var(--fs-color-border);border-radius:var(--fs-radius-xl);
  padding:1.4rem 1.5rem;margin-top:1.5rem;box-shadow:var(--fs-shadow-sm)}
.box--viola{border-color:var(--fs-purple-200);background:var(--fs-purple-50)}
.box p:first-child{margin-top:0}
.cmp--prose{margin-top:1.25rem}
.cmp--prose table{min-width:0;table-layout:fixed}
.cmp--prose th,.cmp--prose td{padding:.8rem .7rem;font-size:.875rem;vertical-align:top}
.faq--left{margin-left:0}
.work__body h2{font-size:1.0625rem}
.faq-group{margin-top:3rem}
.faq-group:first-child{margin-top:0}
.faq-group h2{font-size:clamp(1.375rem,4vw,1.625rem)}
.links{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1.25rem}
.links a{display:block;background:var(--fs-white);border:1px solid var(--fs-color-border);
  border-radius:var(--fs-radius-lg);padding:1rem 1.15rem;text-decoration:none;color:var(--fs-ink);font-weight:600}
.links a span{display:block;font-weight:400;font-size:.875rem;color:var(--fs-color-text-muted);margin-top:.2rem}
.links a:hover{border-color:var(--fs-purple-200);box-shadow:var(--fs-shadow-md)}