/* ============================================================
   Pagine funzione, versione 2 (novembre 2026)
   Stessa famiglia delle pagine funzione online (colline dipinte, apertura divisa,
   titolo con il corsivo serif, blocchi numerati, «altre funzionalità», chiusura scura),
   più moderna: interfaccia vera ricostruita e animata nell'apertura, blocchi con l'interfaccia accanto.
   Si appoggia solo a styles.css del sito. (fn-v1.css = la prima bozza, stile home)
   ============================================================ */

/* ── apertura (dal telaio delle pagine funzione) ── */
.page-hero { padding: 132px 0 72px; position: relative; background-color: var(--paper); }
.page-hero::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 28%;
  background: linear-gradient(to bottom, rgba(250, 250, 249, 0) 0%, var(--paper) 100%); pointer-events: none; }
@media (max-width: 768px) { .page-hero { padding: 108px 0 48px; } }

.fx-split { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 56px; align-items: center; }
.fx-text .h1-display { font-size: clamp(2.1rem, 3.5vw, 3.35rem); line-height: 1.05; margin: 0 0 24px; }
.fx-text .lede { max-width: 520px; margin: 0; }
.fx-text .cta-row-equal { justify-content: flex-start; margin-top: 34px; }
.fx-tag { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px 0 4px; margin: 0 0 20px; border-radius: 999px;
  background: rgba(255,255,255,.88); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink);
  box-shadow: 0 8px 20px -14px rgba(23,18,74,.35); }
.fx-tag b { height: 24px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; }

/* cornice da browser, moderna */
.fx-media { position: relative; min-width: 0; }
.fx-frame { position: relative; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(17,17,20,.08);
  box-shadow: 0 50px 90px -40px rgba(30,27,75,.5), 0 10px 24px -12px rgba(30,27,75,.18); }
.fx-frame__bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #FBFBFD; border-bottom: 1px solid #EEF0F4; }
.fx-frame__bar > i { width: 10px; height: 10px; border-radius: 50%; background: #E3E5EA; }
.fx-frame__url { margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: 8px; background: #F1F2F5;
  font-size: 11.5px; color: #6B7080; font-family: 'Geist', sans-serif; transform: translateX(-24px); }
.fn-replay { display: flex; justify-content: center; margin-top: 14px; min-height: 32px; }
.fn-replay button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(17,17,20,.12);
  background: rgba(255,255,255,.9); color: #45434B; font: 500 13px/1 'Geist', sans-serif; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s; }
.fn-replay button.on { opacity: 1; pointer-events: auto; }

@media (max-width: 1000px) {
  .fx-split { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .fx-text .lede { margin: 0 auto; }
  .fx-text .cta-row-equal { justify-content: center; }
  .fx-text .h1-display { font-size: clamp(2.3rem, 7.6vw, 3.3rem); }
}
@media (max-width: 640px) {
  .fx-frame { border-radius: 14px; }
  .fx-frame__bar { height: 32px; }
  .fx-frame__url { font-size: 10.5px; transform: none; }
}

/* ============================================================
   finestra dell'app (stessa grammatica della home)
   ============================================================ */
.fn-stage { container-type: inline-size; position: relative; }
.va { --ink: #0F172A; --ink2: #334155; --mute: #64748B; --line: #E2E8F0; --ind: #4F46E5; --ind2: #E0E7FF;
  position: relative; display: flex; gap: 10px; height: 500px; padding: 10px; background: #F0F5FA; overflow: hidden; text-align: left;
  font-family: 'Geist', system-ui, sans-serif; color: var(--ink); }
.va i.ph, .va i.ph-fill, .va i.ph-bold { font-size: 1em; line-height: 1; }
.va-rail { flex: none; width: 48px; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; align-items: center;
  gap: 11px; padding: 12px 0 10px; color: #64748B; font-size: 17px; }
.va-rail > i { width: 32px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.va-rail > i.on { background: var(--ind2); color: var(--ind); }
.va-mark { width: 19px; height: 19px; color: #0B0B18; margin: 0 0 2px; }
.va-rail__sp { flex: 1; }
.va-rail__me { width: 26px; height: 26px; border-radius: 50%; background: #4338CA; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.va-main { position: relative; flex: 1; min-width: 0; padding: 4px 4px 0 6px; display: flex; flex-direction: column; overflow: hidden; }
.va-top { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.va-top h4 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); font-family: 'Geist', sans-serif; }
.va-top__r { display: flex; align-items: center; gap: 12px; color: #94A3B8; font-size: 15px; }
.va-brand { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px 0 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink); font-size: 12.5px; font-weight: 600; }
.va-brand b { width: 22px; height: 22px; border-radius: 50%; background: #FDF0E7; color: #B5603F; font-size: 9px; font-weight: 800; display: grid; place-items: center; }
.va-brand i { color: #94A3B8; font-size: 11px; }
.va-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.va-sp { flex: 1; }
.va-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 9px;
  font-size: 12px; font-weight: 500; color: var(--ink2); white-space: nowrap; }
.va-seg { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 3px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.va-seg em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--mute); padding: 0 9px; height: 20px; display: inline-flex; align-items: center; border-radius: 6px; }
.va-seg em.on { background: #6366F1; color: #fff; }

/* cursore grande */
.fn-cur { position: absolute; left: 0; top: 0; z-index: 30; width: 24px; height: 24px; pointer-events: none; opacity: 0;
  transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .3s; filter: drop-shadow(0 4px 8px rgba(15,23,42,.35)); }
.fn-cur svg { width: 100%; height: 100%; display: block; }
.fn-cur.is-on { opacity: 1; }
.fn-cur.is-click::after { content: ''; position: absolute; left: -10px; top: -10px; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #4F46E5; animation: fnClick .5s ease-out forwards; }
@keyframes fnClick { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* comparsa dei pezzi: senza JS è tutto visibile (stato finale) */
.fn-anim [data-s] { transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.fn-anim [data-s]:not(.on) { opacity: 0; transform: translateY(10px); }
.fn-anim .fn-grow[data-s] { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s cubic-bezier(.22,1,.36,1), opacity .5s, transform .6s; }
.fn-anim .fn-grow[data-s]:not(.on) { grid-template-rows: 0fr; }
.fn-grow > * { min-height: 0; overflow: hidden; }
.fn-type::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: fnBlink 1s steps(1) infinite; }
.fn-type.done::after { display: none; }
@keyframes fnBlink { 50% { opacity: 0; } }

/* chat (comune) */
.fn-chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fn-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 11px; padding: 0 6px 66px; }
.fn-me { margin-left: auto; width: fit-content; max-width: 82%; background: #818CF8; color: #fff; border-radius: 15px 15px 4px 15px; padding: 9px 14px; font-size: 13px; line-height: 1.5; }
.fn-att { display: flex; gap: 5px; justify-content: flex-end; margin-bottom: 6px; }
.fn-att img { width: 34px; height: 44px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 4px 10px -6px rgba(15,23,42,.4); background: #EEF2F7; }
.fn-bot { max-width: 94%; font-size: 13px; line-height: 1.55; color: #0F172A; }
.fn-bot p { margin: 0; }
.fn-who { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 11.5px; font-weight: 600; color: #64748B; }
.fn-who svg { width: 14px; height: 14px; color: #0B0B18; }
.fn-in { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(560px, calc(100% - 16px)); height: 42px; display: flex; align-items: center; gap: 10px;
  padding: 0 7px 0 14px; background: #fff; border: 1px solid #E2E8F0; border-radius: 13px; color: #94A3B8; font-size: 12.5px; box-shadow: 0 8px 22px -16px rgba(15,23,42,.35); }
.fn-in span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-in b { width: 29px; height: 29px; border-radius: 9px; background: #A5B4FC; color: #fff; display: grid; place-items: center; flex: none; }
/* il messaggio si scrive qui e parte con invio (9/11) */
.fn-in.is-compose { height: auto; min-height: 42px; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; row-gap: 7px; padding-top: 7px; padding-bottom: 6px; }
.fn-in.is-compose > span { color: #0F172A; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; padding-bottom: 5px; }
.fn-in.is-compose > i { padding-bottom: 7px; }
.fn-in b { transition: background .2s, transform .15s; }
.fn-in b.is-ready { background: #4F46E5; }
.fn-in__att { flex: 0 0 100%; display: flex; gap: 5px; }
.fn-in__att img { width: 30px; height: 38px; object-fit: cover; border-radius: 7px; border: 1px solid #E2E8F0; background: #EEF2F7; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.22,1,.36,1); }
.fn-in__att img.on { opacity: 1; transform: none; }
.fn-side { position: relative; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; display: flex; flex-direction: column; min-height: 0; padding: 10px 8px 0; overflow: hidden; }
.fn-side__h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #0F172A; padding: 0 4px 8px; border-bottom: 1px solid #EEF2F7; }
.fn-side__h i { color: #4F46E5; }
.fn-side .fn-log { padding: 8px 0 56px; gap: 9px; }
.fn-side .fn-me { max-width: 94%; font-size: 12px; }
.fn-side .fn-bot { font-size: 12px; max-width: 100%; }
.fn-side .fn-in { width: calc(100% - 12px); height: 38px; bottom: 8px; font-size: 12px; }
.fn-side .fn-in b { width: 26px; height: 26px; }
.fn-side .fn-in.is-compose { height: auto; min-height: 38px; padding-top: 6px; padding-bottom: 5px; }
.fn-btn { height: 30px; padding: 0 11px; border-radius: 9px; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E2E8F0;
  background: #fff; color: #0F172A; white-space: nowrap; font-family: 'Geist', sans-serif; }
.fn-btn--p { background: #4F46E5; border-color: #4F46E5; color: #fff; }
.fn-tag { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: #EEF2FF; color: #4338CA; white-space: nowrap; }
.fn-tag--ok { background: #ECFDF5; color: #047857; }

/* ── 1 · Video AI ── */
.fv-card { margin-top: 8px; width: min(420px, 100%); background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 12px; }
.fv-card__h { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 12px; font-weight: 700; }
.fv-card__h span { font-weight: 500; color: #64748B; }
.fv-scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.fv-sc__m { position: relative; aspect-ratio: 9 / 16; border-radius: 9px; overflow: hidden; background: #E9EEF5; }
.fv-sc__m img, .fv-sc__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-sc__m img { filter: grayscale(.55) brightness(1.06) contrast(.9); transition: filter .6s; }
.fv-sc__m video { opacity: 0; transition: opacity .5s; }
.fv-sc.is-done .fv-sc__m img { filter: none; }
.fv-sc.is-done .fv-sc__m video { opacity: 1; }
.fv-sc__gen { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,23,42,.35); color: #fff; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .3s; }
.fv-sc.is-gen .fv-sc__gen { opacity: 1; }
.fv-sc.is-gen .fv-sc__m::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%);
  background-size: 220% 100%; animation: fvShine 1.2s linear infinite; }
@keyframes fvShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.fv-sc__ok { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: #10B981; color: #fff; display: grid; place-items: center; font-size: 10px;
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.fv-sc.is-done .fv-sc__ok { opacity: 1; transform: none; }
.fv-sc b { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; line-height: 1.25; }
.fv-sc small { font-size: 10px; color: #64748B; }
.fv-card__f { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #EEF2F7; font-size: 11.5px; color: #64748B; }
.fv-card__f strong { margin-left: auto; font-size: 12.5px; color: #0F172A; }
.fv-go { height: 30px; padding: 0 12px; border-radius: 9px; background: #4F46E5; color: #fff; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: background .3s; }
.fv-go.is-busy { background: #A5B4FC; }
.fv-out { display: flex; gap: 12px; align-items: flex-end; margin-top: 8px; }
.fv-player { position: relative; width: 150px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #0F172A; flex: none; box-shadow: 0 18px 40px -22px rgba(15,23,42,.6); }
.fv-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-player__bar { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.fv-player__bar i { display: block; height: 100%; width: 0; background: #fff; }
.fv-out__side { display: flex; flex-direction: column; gap: 7px; padding-bottom: 2px; }
.fv-out__side small { font-size: 11.5px; color: #64748B; }
.fv-out__btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── 2 · Montaggio AI ── */
.fm { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 10px; }
.fm > * { min-height: 0; overflow: hidden; }
.fm-list { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 5px; }
.fm-list li { display: flex; gap: 6px; font-size: 11.5px; line-height: 1.4; color: #334155; }
.fm-list li::before { content: '✓'; flex: none; width: 15px; height: 15px; border-radius: 50%; background: #D1FAE5; color: #047857; font-size: 9px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
.fm-main { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.fm-view { position: relative; background: #1B1B22; border-radius: 14px; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.fm-view__tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #E2E8F0; font-size: 11px; font-weight: 600; z-index: 2; }
.fm-view__tag i { width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; }
.fm-view.is-ready .fm-view__tag i { background: #10B981; }
.fm-view__acts { position: absolute; top: 9px; right: 9px; display: flex; gap: 6px; z-index: 2; }
.fm-ph { position: relative; height: calc(100% - 22px); aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #000; }
.fm-ph img, .fm-ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fm-ph img { filter: saturate(.25) brightness(.55) blur(7px); transform: scale(1.08); transition: filter .8s, transform .8s; }
.fm-view.is-ready .fm-ph img { filter: none; transform: none; }
.fm-ph video { opacity: 0; transition: opacity .6s; }
.fm-view.is-ready .fm-ph video { opacity: 1; }
.fm-ph__raw { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; color: #fff; font-size: 12px; font-weight: 600; text-align: center; transition: opacity .6s; }
.fm-ph__raw i { font-size: 24px; opacity: .9; }
.fm-view.is-ready .fm-ph__raw { opacity: 0; }
.fm-tl { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 9px 11px 11px; }
.fm-tl__h { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; font-size: 11px; color: #64748B; }
.fm-tl__h b { font-size: 11.5px; color: #0F172A; font-variant-numeric: tabular-nums; }
.fm-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; height: 26px; }
.fm-row + .fm-row { margin-top: 4px; }
.fm-row > small { font-size: 10px; font-weight: 600; color: #94A3B8; letter-spacing: .02em; }
.fm-track { position: relative; height: 100%; display: flex; gap: 2px; overflow: hidden; border-radius: 6px; background: #F1F5F9; }
.fm-seg { flex: 1 1 0; min-width: 0; height: 100%; border-radius: 4px; background-size: auto 100%; background-repeat: repeat-x; background-color: #CBD5E1;
  transition: flex-grow .9s cubic-bezier(.22,1,.36,1), opacity .6s, margin .9s; }
.fm-seg--cut { flex-grow: .55; background: repeating-linear-gradient(-45deg, #E2E8F0 0 5px, #F8FAFC 5px 10px); border: 1px dashed #CBD5E1; }
.fm-seg--ciak { flex-grow: .45; background: repeating-linear-gradient(-45deg, #FECACA 0 5px, #FEF2F2 5px 10px); border: 1px dashed #FCA5A5; }
.fm-tl.is-cut .fm-seg--cut, .fm-tl.is-cut .fm-seg--ciak { flex-grow: 0; opacity: 0; margin-left: -2px; border-width: 0; }
.fm-cap { position: absolute; top: 4px; bottom: 4px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 4px; background: #FDE68A; color: #78350F;
  font-size: 9.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-fx { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; transform: rotate(45deg); border-radius: 3px; background: #F97316; }
.fm-fx--w { background: #8B5CF6; }
.fn-anim .fm-fx[data-s]:not(.on) { transform: rotate(45deg) scale(0); }
.fm-wave { position: absolute; inset: 4px 6px; display: flex; align-items: center; gap: 2px; }
.fm-wave i { flex: 1; border-radius: 2px; background: #C4B5FD; transition: height .7s cubic-bezier(.22,1,.36,1); }
.fn-anim .fm-tl:not(.is-music) .fm-wave i { height: 2px !important; }
.fm-hook { outline: 2px solid #4F46E5; outline-offset: -2px; }

/* ── 3 · Da video lungo a clip ── */
.fc { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.fc-ep { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: center; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 9px; }
.fc-ep__v { position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #0F172A; }
.fc-ep__v img, .fc-ep__v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fc-ep__t { min-width: 0; }
.fc-ep__t b { display: block; font-size: 13px; font-weight: 700; }
.fc-ep__t small { display: block; margin-top: 1px; font-size: 11.5px; color: #64748B; }
.fc-wave { position: relative; height: 34px; margin-top: 24px; display: flex; align-items: center; gap: 2px; }
.fc-wave i { flex: 1; border-radius: 2px; background: #CBD5E1; transition: background .4s; }
.fc-wave i.hl { background: #4F46E5; }
.fc-head { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; border-radius: 2px; background: #0F172A; opacity: 0; }
.fn-anim .fc-head.run { opacity: 1; animation: fcScan 3.2s linear forwards; }
.fc-head.gone { opacity: 0 !important; transition: opacity .4s; }
@keyframes fcScan { from { left: 0; } to { left: 100%; } }
.fc-mark { position: absolute; top: -19px; font-size: 10px; font-weight: 700; color: #4F46E5; transform: translateX(-50%); }
.fn-anim .fc-mark[data-s]:not(.on) { transform: translateX(-50%) translateY(6px); }
.fc-status { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.fc-status span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: #F1F5F9; color: #94A3B8; font-size: 10.5px; font-weight: 600; transition: background .3s, color .3s; }
.fc-status span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fc-status span.on { background: #ECFDF5; color: #047857; }
.fc-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 10px; }
.fc-clip { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 11px; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 9px; min-height: 0; overflow: hidden; }
.fc-ph { position: relative; aspect-ratio: 9 / 16; border-radius: 9px; overflow: hidden; background: #0F172A; align-self: start; }
.fc-ph img, .fc-ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fc-info { min-width: 0; display: flex; flex-direction: column; gap: 7px; font-size: 11px; color: #334155; }
.fc-info b { font-size: 12px; color: #0F172A; line-height: 1.3; }
.fc-score { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
.fc-score span { display: flex; justify-content: space-between; font-size: 10.5px; color: #64748B; }
.fc-score em { font-style: normal; font-weight: 700; color: #0F172A; }
.fc-why { margin: 0; font-size: 10.5px; line-height: 1.45; color: #475569; }
.fc-why::before { content: 'Perché: '; font-weight: 700; color: #4F46E5; }
.fc-acts { margin-top: auto; display: flex; gap: 5px; flex-wrap: wrap; }

/* ── 4 · Meta Ads ── */
.fa { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; }
.fa > * { min-height: 0; overflow: hidden; }
.fa-dash { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.fa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: start; }
.fa-kpi { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 9px 11px; }
.fa-kpi small { display: block; font-size: 10.5px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-kpi b { display: block; margin-top: 3px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fa-kpi em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #64748B; }
.fa-kpi em.up { color: #047857; } .fa-kpi em.dn { color: #B91C1C; }
.fa-chart { position: relative; flex: 1; min-height: 0; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 10px 12px 8px; display: flex; flex-direction: column; }
.fa-chart__h { font-size: 11.5px; font-weight: 700; }
.fa-chart__h span { font-weight: 500; color: #64748B; margin-left: 6px; }
.fa-chart svg { flex: 1; width: 100%; min-height: 0; margin-top: 6px; overflow: visible; }
.fa-line { fill: none; stroke: #4F46E5; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fa-line--prev { stroke: #CBD5E1; stroke-dasharray: 4 5; stroke-width: 1.5; }
.fa-area { fill: url(#faGrad); }
.fn-anim .fa-chart svg { clip-path: inset(0 100% 0 0); }
.fn-anim .fa-chart.on svg { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.22,1,.36,1); }
.fa-ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.fa-ad { display: flex; gap: 7px; align-items: center; background: #fff; border: 1px solid #E2E8F0; border-radius: 11px; padding: 6px; min-width: 0; }
.fa-ad img { width: 30px; height: 38px; object-fit: cover; border-radius: 6px; flex: none; }
.fa-ad div { min-width: 0; font-size: 10px; color: #64748B; line-height: 1.35; }
.fa-ad b { display: block; font-size: 11px; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-ad.is-tired { border-color: #FCA5A5; background: #FFF7F7; }
.fa-prop { margin-top: 7px; border: 1px solid #C7D2FE; border-radius: 11px; padding: 9px; background: #F8FAFF; }
.fa-prop__h { font-size: 11.5px; font-weight: 700; margin-bottom: 7px; }
.fa-prop table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.fa-prop th { text-align: left; font-weight: 600; color: #64748B; padding: 2px 0; }
.fa-prop td { padding: 3px 0; font-variant-numeric: tabular-nums; }
.fa-prop td:nth-child(n+2), .fa-prop th:nth-child(n+2) { text-align: right; }
.fa-prop td b { color: #047857; }
.fa-prop__f { display: flex; gap: 6px; margin-top: 8px; }
.fa-ok { display: none; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; font-weight: 600; color: #047857; }
.fa-prop.is-done .fa-ok { display: flex; }
.fa-prop.is-done .fa-prop__f { display: none; }

/* ── 5 · Analisi competitor ── */
.fk-ask { margin-top: 8px; width: min(400px, 100%); background: #fff; border: 1px solid #C7D2FE; border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 11px; }
.fk-av { width: 38px; height: 38px; border-radius: 50%; flex: none; padding: 2px; background: linear-gradient(135deg, #FDF497, #FD5949 45%, #D6249F 60%, #285AEB); }
.fk-av span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0F172A; font-size: 11px; font-weight: 800; border: 2px solid #fff; }
.fk-ask__t { flex: 1; min-width: 0; }
.fk-ask__t b { display: block; font-size: 12.5px; }
.fk-ask__t small { font-size: 11px; color: #64748B; }
.fk-ask.is-done [data-open] { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.fk-over { margin-top: 8px; width: min(440px, 100%); background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 11px; }
.fk-over__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; font-size: 12px; font-weight: 700; }
.fk-over__h span { font-weight: 500; font-size: 11px; color: #64748B; }
.fk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.fk-post__m { position: relative; aspect-ratio: 4 / 5; border-radius: 9px; overflow: hidden; background: #EEF2F7; }
.fk-post__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fk-post__r { position: absolute; top: 5px; left: 5px; height: 19px; padding: 0 6px; border-radius: 999px; background: rgba(15,23,42,.72); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.fk-post small { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: #64748B; }
.fk-post small b { color: #0F172A; font-weight: 700; }
.fk-rows { display: grid; gap: 6px; }
.fk-row { display: grid; grid-template-columns: 18px 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 6px 8px; border: 1px solid #EEF2F7; border-radius: 10px; background: #FBFCFE; }
.fk-rk { font-size: 11px; font-weight: 800; color: #4F46E5; text-align: center; }
.fk-row img, .fk-ph { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; object-position: 50% 100%; }
.fk-ph { display: grid; place-items: center; background: #EEF2F7; color: #94A3B8; font-size: 16px; }
.fk-row div { min-width: 0; }
.fk-row b { display: block; font-size: 11.5px; }
.fk-row small { display: block; font-size: 10.5px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-row .r { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fn-ui .fk-row { padding: 8px 10px; }
.fn-ui .fk-row img, .fn-ui .fk-ph { width: 44px; height: 44px; }
.fn-ui .fk-row { grid-template-columns: 18px 44px minmax(0, 1fr) auto; }
.fk-quick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.fk-quick em { font-style: normal; font-size: 11px; font-weight: 500; color: #4338CA; background: #E0E7FF; border-radius: 99px; padding: 4px 10px; }

/* ── la finestra più stretta (apertura divisa a metà: ~600 px) ── */
@container (max-width: 760px) {
  .va-rail { display: none; }
  .va { height: 480px; }
  .va-top__r > i { display: none; }
  .fm { grid-template-columns: 196px minmax(0, 1fr); }
  .fm-view__acts .fn-btn:first-child { display: none; }
  .fm-row { grid-template-columns: 46px 1fr; height: 22px; }
  .fc-ep { grid-template-columns: 140px minmax(0, 1fr); }
  .fc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-board .fc-clip:nth-child(3) { display: none; }
  .fc-clip { grid-template-columns: 112px minmax(0, 1fr); }
  .fa { grid-template-columns: minmax(0, 1fr) 220px; }
  .fa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-kpi b { font-size: 16px; }
  .fa-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-ads .fa-ad:nth-child(3) { display: none; }
  .fa-dash > .va-bar .va-chip { display: none; }
}
/* ── telefono ── */
@container (max-width: 480px) {
  .va { height: 520px; padding: 7px; }
  .va-main { padding: 2px 2px 0; }
  .va-top h4 { font-size: 17px; }
  .fn-me { max-width: 92%; font-size: 12.5px; }
  .fn-bot { font-size: 12.5px; }
  .fv-scenes { gap: 5px; }
  .fv-sc b { font-size: 10px; }
  .fv-sc small { display: none; }
  .fv-card__f { flex-wrap: wrap; }
  .fv-player { width: 118px; }
  .fm { grid-template-columns: minmax(0, 1fr); grid-template-rows: 150px minmax(0, 1fr); }
  .fm .fn-side__h { display: none; }
  .fm .fn-side .fn-log { padding: 2px 0 50px; }
  .fm-list li:nth-child(n+3) { display: none; }
  .fm-view__acts { display: none; }
  .fm-row:nth-child(4) { display: none; }
  .fc-ep { grid-template-columns: 96px minmax(0, 1fr); padding: 8px; }
  .fc-ep__t b { font-size: 12px; }
  .fc-status { display: none; }
  .fc-board { grid-template-columns: minmax(0, 1fr); }
  .fc-board .fc-clip:nth-child(n+2) { display: none; }
  .fc-clip { grid-template-columns: 120px minmax(0, 1fr); }
  .fc-acts { display: none; }
  .fa { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .fa-chart, .fa-ads, .fa-dash > .va-bar { display: none; }
  .fa-kpi { padding: 8px 10px; }
  .fk-grid { gap: 5px; }
  .fk-post small { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fn-anim [data-s], .fn-cur, .fm-seg, .fm-wave i { transition: none !important; }
}

/* ============================================================
   sotto l'apertura: tutto fermo
   ============================================================ */
.fx-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.fx-head .label-eyebrow { margin-bottom: 14px; }
.fx-head .lede { max-width: 560px; margin: 16px auto 0; }

/* blocchi numerati con l'interfaccia accanto (alternati) */
.fx-blocks { display: flex; flex-direction: column; gap: 28px; max-width: 1120px; margin: 0 auto; }
.fx-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.fx-block:nth-child(even) .fx-block__t { order: 2; }
.fx-num { display: block; font-family: 'Noto Serif', Georgia, serif; font-style: italic; font-weight: 500; font-size: 34px; line-height: 1; color: var(--accent); letter-spacing: -.02em; margin-bottom: 18px; }
.fx-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; }
.fx-title { font-family: 'Geist', system-ui, sans-serif; font-weight: 600; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.15; letter-spacing: -.03em; color: var(--ink); margin: 0 0 14px; }
.fx-title em { font-family: 'Noto Serif', Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: -.015em; }
.fx-desc { color: var(--ink-soft); font-size: 17px; line-height: 1.65; max-width: 470px; margin: 0; }
.fx-vis { position: relative; min-height: 400px; border-radius: 24px; overflow: hidden; display: grid; place-items: center; padding: 32px;
  background: radial-gradient(120% 90% at 20% 0%, #EEF1FF 0%, #F6F5FB 55%, #F4F3EF 100%); border: 1px solid rgba(17,17,20,.06); }
.fx-vis--warm { background: radial-gradient(120% 90% at 80% 0%, #FFF1E8 0%, #FAF6F1 60%, #F4F3EF 100%); }
.fx-vis--green { background: radial-gradient(120% 90% at 20% 0%, #ECF7EE 0%, #F4F7F1 60%, #F4F3EF 100%); }
.fx-vis--rose { background: radial-gradient(120% 90% at 80% 0%, #FCEDF5 0%, #F8F3F6 60%, #F4F3EF 100%); }

/* interfacce ferme dentro i blocchi */
.fn-ui { position: relative; z-index: 1; width: min(440px, 100%); background: #fff; border-radius: 16px; padding: 14px; border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 30px 60px -32px rgba(23,18,74,.45); font-family: 'Geist', sans-serif; color: #0F172A; text-align: left; }
.fn-ui__lab { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #4F46E5; margin-bottom: 10px; }
.fn-ui__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #EEF2F7; font-size: 12.5px; }
.fn-ui__row:first-of-type { border-top: 0; }
.fn-ui__row img { width: 36px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.fn-ui__row > div { min-width: 0; }
.fn-ui__row small { display: block; color: #64748B; font-size: 11.5px; }
.fn-ui__row .r { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn-ui__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: #EEF2FF; color: #4F46E5; font-size: 17px; }
.fn-btns { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.fn-refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fn-refs figure { margin: 0; }
.fn-refs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: #F1F5F9; }
.fn-refs figcaption { margin-top: 4px; font-size: 10.5px; color: #64748B; text-align: center; }
.fn-arrow { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 11.5px; color: #64748B; }
.fn-arrow::before, .fn-arrow::after { content: ''; flex: 1; height: 1px; background: #E2E8F0; }
.fn-frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fn-frames img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; }
.fn-fan { position: relative; width: 100%; height: 340px; }
.fn-fan img { position: absolute; top: 50%; left: 50%; width: 150px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; border: 5px solid #fff;
  box-shadow: 0 30px 50px -24px rgba(30,27,75,.5); }
.fn-fan img:nth-child(1) { transform: translate(-50%, -50%) translateX(-120px) rotate(-8deg); }
.fn-fan img:nth-child(2) { transform: translate(-50%, -50%) translateX(120px) rotate(7deg); }
.fn-fan img:nth-child(3) { transform: translate(-50%, -52%); z-index: 2; width: 166px; }
.fn-cal { width: min(380px, 100%); }
.fn-cal .fn-ui__row { padding: 9px 10px; margin-top: 7px; border: 1px solid #D1FAE5; background: #F0FDF4; border-radius: 11px; }
.fn-cal .fn-ui__row .r { color: #047857; }
.fn-crop { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.fn-crop > i { color: #94A3B8; font-size: 22px; }
.fn-crop__wide, .fn-crop__tall, .fn-styles__v { position: relative; overflow: hidden; border: 5px solid #fff; border-radius: 16px; box-shadow: 0 30px 50px -26px rgba(30,27,75,.5); }
.fn-crop__wide { width: 280px; aspect-ratio: 16 / 9; }
.fn-crop__tall { width: 124px; aspect-ratio: 9 / 16; }
.fn-crop img, .fn-styles__v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fn-crop__box { position: absolute; top: 0; bottom: 0; border: 2.5px solid #fff; border-radius: 6px; box-shadow: 0 0 0 999px rgba(15,23,42,.5); }
.fn-styles { position: relative; z-index: 1; display: flex; gap: 14px; }
.fn-styles figure { margin: 0; }
.fn-styles__v { width: 124px; aspect-ratio: 9 / 16; border-width: 4px; }
.fn-styles__v span { position: absolute; left: 6px; right: 6px; bottom: 26%; text-align: center; font: 800 12px/1.2 'Montserrat', sans-serif; color: #fff; }
.fn-styles .st1 { text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.fn-styles .st1 u { text-decoration: none; color: #FDE047; }
.fn-styles .st2 { font-size: 14px; letter-spacing: -.01em; -webkit-text-stroke: 4px #111; paint-order: stroke fill; }
.fn-styles .st3 { left: 10px; right: 10px; padding: 5px 6px; border-radius: 7px; background: #fff; color: #111; font-weight: 700; }
.fn-styles figcaption { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft); text-align: center; }
.fn-bar { height: 8px; border-radius: 8px; background: #F1F5F9; margin: 8px 0 6px; overflow: hidden; }
.fn-bar i { display: block; height: 100%; border-radius: 8px; background: #4F46E5; }

/* esempi veri (video fermi finché non sono a schermo) */
.fx-ex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; }
.fx-ex figure { margin: 0; }
.fx-ex__v { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #0F172A; box-shadow: 0 30px 50px -34px rgba(30,27,75,.55); }
.fx-ex__v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-ex figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.fx-ex figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* cosa puoi chiedere */
.fx-asks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto; }
.fx-q { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.fx-q i { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #EEF2FF; color: var(--accent); font-size: 15px; margin-top: -2px; }

/* domande */
.fx-faq { max-width: 780px; margin: 0 auto; }
.fx-faq details { border-top: 1px solid var(--line); }
.fx-faq details:last-child { border-bottom: 1px solid var(--line); }
.fx-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px;
  font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font-size: 18px; color: var(--ink-soft); }
.fx-faq details[open] summary::after { content: '−'; }
.fx-faq details p { margin: -6px 0 20px; padding-right: 44px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* le altre funzionalità (stesso componente delle pagine online, rifinito) */
.feat-others-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto; }
.feat-others-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.feat-other-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .25s, transform .25s; }
.feat-other-card:hover { border-color: var(--ink); transform: translateX(2px); }
.feat-other-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex-shrink: 0; }
.feat-other-body { flex: 1; min-width: 0; }
.feat-other-name { display: flex; align-items: center; gap: 8px; font-family: 'Geist', system-ui, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -.018em; color: var(--ink); margin-bottom: 2px; }
.feat-other-name small { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: #EEF2FF; border-radius: 999px; padding: 2px 7px; }
.feat-other-desc { font-size: 13px; color: var(--muted); line-height: 1.45; }
.feat-other-arrow { font-size: 14px; color: var(--muted); transition: color .2s, transform .2s; flex-shrink: 0; }
.feat-other-card:hover .feat-other-arrow { color: var(--accent); transform: translateX(3px); }

/* chiusura scura */
.cta-close { background: #14112B; color: #fff; border-radius: 28px; padding: 84px 60px; text-align: center; position: relative; overflow: hidden; }
.cta-close::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, rgba(99,102,241,.35), rgba(99,102,241,0) 70%),
              radial-gradient(circle, rgba(255,255,255,.06) .8px, transparent 1px) 0 0 / 28px 28px; }
.cta-close > * { position: relative; z-index: 1; }
.cta-close h2 { color: #fff; margin: 0 auto 20px; max-width: 760px; }
.cta-close h2 span { color: #A5B4FC; }
.cta-close p { color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.6; margin: 0 auto 32px; max-width: 580px; }
.cta-close .cta-row-equal { justify-content: center; }

@media (max-width: 1000px) {
  .fx-block, .fx-block:nth-child(even) { grid-template-columns: 1fr; gap: 26px; }
  .fx-block:nth-child(even) .fx-block__t { order: 0; }
  .fx-desc { max-width: 620px; }
  .fx-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fx-head { margin-bottom: 36px; }
  .fx-blocks { gap: 48px; }
  .fx-num { font-size: 28px; margin-bottom: 12px; }
  .fx-desc { font-size: 15.5px; }
  .fx-vis { min-height: 0; padding: 22px 14px; border-radius: 20px; }
  .fx-ex { gap: 10px; }
  .fx-ex__v { border-radius: 14px; }
  .fx-ex figcaption { font-size: 13.5px; }
  .fx-asks { grid-template-columns: 1fr; gap: 8px; }
  .fx-q { font-size: 15px; padding: 14px; }
  .fx-faq summary { font-size: 16px; padding: 18px 0; }
  .fx-faq details p { padding-right: 0; font-size: 15px; }
  .feat-others-grid { grid-template-columns: 1fr; }
  .cta-close { padding: 52px 22px; border-radius: 20px; }
  .cta-close p { font-size: 15px; }
  .fn-fan { height: 280px; }
  .fn-fan img { width: 112px; border-width: 4px; }
  .fn-fan img:nth-child(3) { width: 126px; }
  .fn-fan img:nth-child(1) { transform: translate(-50%, -50%) translateX(-86px) rotate(-8deg); }
  .fn-fan img:nth-child(2) { transform: translate(-50%, -50%) translateX(86px) rotate(7deg); }
  .fn-crop { gap: 10px; }
  .fn-crop__wide { width: 180px; border-width: 4px; }
  .fn-crop__tall { width: 82px; border-width: 4px; }
  .fn-styles { gap: 8px; }
  .fn-styles__v { width: 92px; }
  .fn-styles__v span { font-size: 10px; }
  .fn-styles .st2 { font-size: 11.5px; -webkit-text-stroke-width: 3px; }
}

/* correzioni dopo il controllo nel browser (9/11) */
.va em { font-family: 'Geist', system-ui, sans-serif; font-style: normal; }
@media (min-width: 1001px) {
  .fx-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 48px; }
  .fx-text .h1-display { font-size: clamp(2rem, 3.05vw, 2.95rem); text-wrap: balance; }
}
@container (max-width: 760px) {
  .fm-view { justify-items: end; padding-right: 12px; }
  .fm-view__acts { display: none; }
  .fm-cap:nth-child(2), .fm-cap:nth-child(5) { display: none; }
  .fm-cap:nth-child(1) { left: 1% !important; width: 23% !important; }
  .fm-cap:nth-child(3) { left: 26% !important; width: 23% !important; }
  .fm-cap:nth-child(4) { left: 51% !important; width: 23% !important; }
  .fm-cap:nth-child(6) { left: 76% !important; width: 23% !important; }
}
@container (max-width: 480px) {
  .fm-view { padding-right: 10px; }
  .fm-view__tag { font-size: 10.5px; }
  .fm-cap { font-size: 9px; padding: 0 4px; }
}

/* domande: niente bordo blu al clic, solo da tastiera */
.fx-faq summary:focus { outline: none; }
.fx-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
/* timeline del montaggio nella cornice stretta: tre scritte intere invece di quattro tagliate */
@container (max-width: 760px) {
  .fm-cap:nth-child(4) { display: none; }
  .fm-cap:nth-child(1) { left: 1% !important; width: 31% !important; }
  .fm-cap:nth-child(3) { left: 34.5% !important; width: 31% !important; }
  .fm-cap:nth-child(6) { left: 68% !important; width: 31% !important; }
}

/* ── Portale cliente ── */
.fp { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.fp-head { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E2E8F0; border-radius: 13px; padding: 8px 10px; }
.fp-logo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #0F172A; white-space: nowrap; }
.fp-logo i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #2DD4BF, #0D9488); flex: none; }
.fp-tabs { display: flex; gap: 2px; margin-left: auto; }
.fp-tabs em { font-style: normal; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 600; color: #64748B; padding: 5px 9px; border-radius: 8px; white-space: nowrap; }
.fp-tabs em.on { background: #F1F5F9; color: #0F172A; }
.fp-sub { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; color: #0F172A; padding: 0 2px; }
.fp-sub small { font-weight: 500; color: #64748B; }
.fp-list { display: grid; gap: 7px; }
.fp-card { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 11px; align-items: center; background: #fff; border: 1px solid #E2E8F0; border-radius: 13px; padding: 8px 10px;
  transition: border-color .4s, background .4s; }
.fp-card > img { width: 50px; height: 62px; object-fit: cover; border-radius: 8px; }
.fp-card b { display: block; font-size: 12px; line-height: 1.3; color: #0F172A; }
.fp-card small { display: block; margin-top: 2px; font-size: 10.5px; color: #64748B; }
.fp-acts { display: flex; gap: 5px; }
.fp-card.is-ok { border-color: #A7F3D0; background: #F0FDF4; }
.fp-card.is-ok .fp-yes { background: #10B981; border-color: #10B981; }
.fp-card.is-ok .fp-no, .fp-card.is-rev .fp-yes { display: none; }
.fp-card.is-rev { border-color: #FDE68A; background: #FFFBEB; }
.fp-card.is-rev .fp-no { background: #F59E0B; border-color: #F59E0B; color: #fff; }
.fp-note { grid-column: 2 / -1; margin-top: 2px; font-size: 11px; color: #92400E; background: #FEF3C7; border-radius: 8px; padding: 6px 9px; }
.fp-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #EEF2F7; font-size: 12.5px; }
.fp-switch:first-of-type { border-top: 0; }
.fp-switch small { display: block; color: #64748B; font-size: 11px; }
.fp-toggle { width: 34px; height: 20px; border-radius: 999px; background: #10B981; position: relative; flex: none; }
.fp-toggle::after { content: ''; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.fp-toggle.off { background: #CBD5E1; } .fp-toggle.off::after { right: auto; left: 3px; }
.fp-group { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; margin-top: 7px; border: 1px solid #EEF2F7; border-radius: 11px; font-size: 12.5px; }
.fp-group b { font-size: 12.5px; }
.fp-group small { display: block; color: #64748B; font-size: 11px; }
@container (max-width: 480px) {
  .fp-tabs em:nth-child(n+3) { display: none; }
  .fp-card { grid-template-columns: 44px minmax(0, 1fr); }
  .fp-card > img { width: 44px; height: 55px; }
  .fp-acts { grid-column: 1 / -1; justify-content: flex-end; }
}
.va-brand { white-space: nowrap; }
.fp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.fp-kpis div { background: #fff; border: 1px solid #E2E8F0; border-radius: 11px; padding: 8px 10px; }
.fp-kpis b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #0F172A; }
.fp-kpis small { font-size: 10.5px; color: #64748B; }
@container (max-width: 760px) { .fp-head .va-brand { display: none; } }

/* ── offerta 200 crediti per i video (9/11): striscia compatta sopra i bottoni (la scheda col bottone era troppo, la riga grigia troppo poco) ── */
.fx-gift { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; max-width: 612px; margin: 28px 0 0; padding: 9px 16px 9px 9px; border-radius: 14px;
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%); border: 1px solid #C7D2FE; font-size: 15px; line-height: 1.4; color: #312E81; text-align: left; }
.fx-gift__ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #4F46E5; color: #fff; font-size: 19px; }
.fx-gift b { color: #4338CA; font-weight: 700; white-space: nowrap; }
.fx-text .fx-gift + .fx-cta { margin-top: 16px; }
@media (max-width: 1000px) { .fx-gift { margin: 26px auto 0; } }
@media (min-width: 641px) {
  .fx-text .fx-cta > .btn-primary, .fx-text .fx-cta > .btn-secondary { flex: 1 1 0; min-width: max-content; max-width: 300px; }
}

/* telefono: barra fissa con l'offerta, a portata di pollice */
.fx-sticky { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 65; display: none; align-items: center; gap: 10px;
  padding: 9px 9px 9px 14px; border-radius: 16px; background: #1E1B4B; color: #fff; box-shadow: 0 18px 40px -12px rgba(15,10,50,.65);
  transform: translateY(calc(100% + 24px)); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.fx-sticky.on { transform: none; }
.fx-sticky > i { font-size: 20px; color: #A5B4FC; flex: none; }
.fx-sticky p { margin: 0; flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.25; color: #fff; }
.fx-sticky a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 11px; background: #fff;
  color: #1E1B4B !important; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (max-width: 820px) { .fx-sticky { display: flex; } }
body.fx-sticky-on .cookie-fab { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); transition: bottom .35s; }
@media (prefers-reduced-motion: reduce) { .fx-sticky { transition: none; } }