/* assets/marketing/pagine/funzionalita.css — stili della sola pagina funzionalita.html
   TF-MKT-REFACTOR-2026-10-06 (passo meccanico): i blocchi <style> della pagina, byte per
   byte e nello stesso ordine. I blocchi stavano nel <body>: il <link> e' in fondo al <head>,
   dopo ../nav.css, che era il primo foglio del <body>: l'ordine fra fogli non cambia. */

/* ═══ [1] blocco per <section class="fvB-hero" aria-label="Hero funzionalità - Software fatturazione elettronic ═══ */
/* ============================================================
   FV-B — Funzionalità hero "Centrata chiara"
   Sfondo bianco, copy centrato compatto (h1 + sub + 2 CTA),
   sotto il visual funz-dashboard-imac.png (max 980px) con
   drop-shadow morbida che sborda oltre il bordo inferiore
   della sezione (crop via overflow:hidden + margin negativo).
   Stile Linear. Zero movimento: solo hover colore/ombra 150ms.
   Unica keyline: border-bottom della sezione (= linea di crop).
   Header flottante sopra: padding-top 168px.
   ============================================================ */
.fvB-hero {
position: relative;
background: #fff;
padding: 168px 20px 0;
text-align: center;
overflow: hidden;
border-bottom: 1px solid rgba(15,23,42,.08);
}

.fvB-inner {
max-width: 820px;
margin: 0 auto;
}

.fvB-h1 {
margin: 0 auto 28px;
max-width: 22ch;
font-size: clamp(40px, 4.6vw, 54px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 700;
color: #0f172a;
}

/* Parola accento in tinta unita ambra */
.fvB-h1-accent {
color: #d97706;
}

.fvB-sub {
margin: 0 auto 38px;
max-width: 52ch;
font-size: 17.5px;
line-height: 1.6;
font-weight: 400;
color: rgba(15,23,42,.62);
}

/* ---------- CTA ---------- */
.fvB-ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
}
.fvB-cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
color: #fff;
text-decoration: none;
background-color: #f59e0b;
box-shadow: 0 1px 2px rgba(15,23,42,.08);
transition: background-color .15s ease, box-shadow .15s ease;
}
.fvB-cta-primary:hover { background-color: #d97706; }
.fvB-cta-bolt { flex: none; display: block; width: 15px; height: 15px; }
.fvB-cta-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
padding: 14px 28px;
border: 1px solid rgba(15,23,42,.16);
font-size: 15px;
font-weight: 600;
color: #0f172a;
text-decoration: none;
background-color: transparent;
transition: background-color .15s ease;
}
.fvB-cta-ghost:hover { background-color: rgba(15,23,42,.04); }
.fvB-cta-primary:focus-visible,
.fvB-cta-ghost:focus-visible {
outline: 2px solid #b45309;
outline-offset: 2px;
}

/* ---------- Visual prodotto: iMac che sborda nel bordo inferiore ---------- */
.fvB-shot {
max-width: 980px;
margin: 64px auto -112px;   /* margin negativo = crop sul bordo sezione */
user-select: none;
pointer-events: none;
}
.fvB-shot img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
filter: drop-shadow(0 32px 64px rgba(15,23,42,.14));
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
.fvB-hero { padding-top: 148px; }
.fvB-shot { max-width: 720px; margin: 52px auto -76px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
.fvB-hero { padding-top: 136px; }
.fvB-h1 { font-size: clamp(34px, 9.4vw, 40px); margin-bottom: 24px; }
.fvB-sub { font-size: 16.5px; margin-bottom: 32px; }
.fvB-ctas {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.fvB-shot { margin: 44px auto -44px; }
.fvB-shot img { filter: drop-shadow(0 20px 40px rgba(15,23,42,.12)); }
}

/* ═══ [2] blocco per <main> ═══ */
.tf-dmstage{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;
 background:radial-gradient(130% 130% at 50% 0%,#162033 0%,#0b1220 55%,#05070d 100%);
 opacity:0;pointer-events:none;transition:opacity .55s ease;overflow:hidden}
.tf-dmstage.on{opacity:1;pointer-events:auto}
.tf-dmstar{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.25;
 box-shadow:0 0 6px rgba(255,255,255,.8);animation:tfdmtw 2.4s ease-in-out infinite}
@keyframes tfdmtw{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.9;transform:scale(1.25)}}
.tf-dmstage__in{position:relative;text-align:center;max-width:720px;width:100%;
 transform:translateY(16px) scale(.97);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.tf-dmstage.on .tf-dmstage__in{transform:none;opacity:1}
.tf-dmstage__chip{display:inline-flex;align-items:center;gap:7px;color:#c7d2fe;font-size:13px;font-weight:700;letter-spacing:.03em;
 padding:7px 15px;border-radius:999px;background:rgba(99,102,241,.16);border:1px solid rgba(129,140,248,.32);box-shadow:0 0 30px rgba(99,102,241,.3)}
.tf-dmstage__chip svg{width:16px;height:16px}
.tf-dmstage__shot{width:100%;max-width:640px;margin:20px auto 0;display:block;
 filter:drop-shadow(0 28px 55px rgba(0,0,0,.6)) drop-shadow(0 0 50px rgba(99,102,241,.22))}
.tf-dmstage__p{margin:18px 0 0;font-size:16px;line-height:1.55;color:#aebbd4;font-weight:500}
.tf-dmstage__hint{display:inline-block;margin-top:22px;font-size:12px;font-weight:600;letter-spacing:.04em;
 text-transform:uppercase;color:#5b6b86}
@media (prefers-reduced-motion:reduce){.tf-dmstage,.tf-dmstage__in{transition:opacity .2s}.tf-dmstar{animation:none}}