/* ==========================================================================
   Fundo.one — Componenti "nx" (stile nuova Home)
   Usati da tutte le pagine interne. Caricato dopo styles.css e system.css.
   Regole: titoli grandi alternati a testi piccoli, pochi elementi,
   sfondi bianco / azzurro tenue / blu notte, solo palette Fundo.one.
   ========================================================================== */
:root {
  --nx-blue: #2362EC;
  --nx-blue-hover: #1B4FC4;
  --nx-ink: #0E1430;
  --nx-muted: #4B5563;
  --nx-soft: #F5F8FF;
  --nx-line: #DCE5F7;
  --nx-lavender: #D9E3FD;
  --nx-mint: #B1DBD2;
  --nx-green: #45B08F;
  --nx-green-text: #17664F;
  --nx-night: #0A1433;
  --nx-h1: clamp(40px, 5.4vw, 68px);
  --nx-h2: clamp(32px, 4.2vw, 54px);
  --nx-sub: clamp(17px, 1.6vw, 20px);
}

/* ---------- Hero pagine interne (scuro, centrato, come la Home) ---------- */
main.fundo > section.nx-hero {
  position: relative; overflow: hidden; isolation: isolate; padding: 112px 0 104px; text-align: center; color: #fff;
  background:
    radial-gradient(circle at 13% 80%, rgba(35, 98, 236, .36), transparent 34%),
    radial-gradient(circle at 62% 0, rgba(217, 227, 253, .15), transparent 32%),
    linear-gradient(135deg, #090D1D 0%, #10172F 58%, #090D1D 100%);
}
.nx-hero .f-container { max-width: 940px; }
.nx-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 14px; border-radius: 999px;
  background: rgba(217, 227, 253, .1); border: 1px solid rgba(217, 227, 253, .22); color: var(--nx-lavender); font-size: 14px; font-weight: 600;
}
main.fundo > section.nx-hero h1 {
  margin: 0 auto; max-width: 900px; color: #fff; font-size: var(--nx-h1); line-height: 1.05; letter-spacing: -.035em; text-align: center;
}
.nx-grad {
  background: linear-gradient(96deg, #D9E3FD 0%, #A9C1FA 45%, #7EA4F6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nx-lead { max-width: 680px; margin: 24px auto 0; color: rgba(255, 255, 255, .82); font-size: var(--nx-sub); line-height: 1.6; }
.nx-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.nx-hero .f-btn:not(.primary) { color: #fff; border-color: rgba(217, 227, 253, .45); background: rgba(255, 255, 255, .06); }
.nx-note { margin: 22px 0 0; color: rgba(217, 227, 253, .85); font-size: 14px; }
.nx-hero-visual { margin: 56px auto 0; max-width: 980px; text-align: left; }
@media (max-width: 560px) {
  main.fundo > section.nx-hero { padding: 72px 0 64px; }
  .nx-actions .f-btn { width: 100%; }
}

/* ---------- Sezioni ---------- */
main.fundo > section.nx-section { padding: var(--s-section, 96px) 0; background: #fff; }
main.fundo > section.nx-section.is-soft { background: var(--nx-soft); }
main.fundo > section.nx-section.is-dark {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(900px 500px at 85% 20%, rgba(35, 98, 236, .45), transparent 60%),
              radial-gradient(700px 420px at 0% 100%, rgba(69, 176, 143, .16), transparent 60%), var(--nx-night);
}

/* ---------- Titoli di sezione: grandi + sottotitolo piccolo ---------- */
.nx-head { max-width: 860px; margin: 0 auto var(--s-head, 56px); text-align: center; }
.nx-head.is-left { margin-left: 0; text-align: left; }
.nx-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--nx-blue); font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.is-dark .nx-kicker { color: #A9C1FA; }
main.fundo > section .nx-head h2,
main.fundo > section .nx-split h2,
main.fundo > section .nx-cta h2 {
  margin: 0; color: var(--nx-ink); font-size: var(--nx-h2); line-height: 1.08; letter-spacing: -.03em;
}
main.fundo > section.is-dark .nx-head h2, main.fundo > section.is-dark .nx-split h2, main.fundo .nx-cta h2 { color: #fff; }
.nx-accent { color: var(--nx-blue); }
.is-dark .nx-accent, .nx-cta .nx-accent { color: #A9C1FA; }
.nx-sub { max-width: 640px; margin: 18px auto 0; color: var(--nx-muted); font-size: var(--nx-sub); line-height: 1.6; }
.nx-head.is-left .nx-sub, .nx-split .nx-sub { margin-left: 0; }
.is-dark .nx-sub { color: rgba(255, 255, 255, .8); }

/* ---------- Griglie di card ---------- */
.nx-grid { display: grid; gap: var(--s-gap, 24px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .nx-grid, .nx-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nx-grid, .nx-grid.is-2, .nx-grid.is-4 { grid-template-columns: 1fr; } }
/* variante a scorrimento laterale su mobile */
@media (max-width: 640px) {
  .nx-grid.is-scroll { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto;
    scroll-snap-type: x mandatory; margin: 0 -24px; padding: 4px 24px 16px; scrollbar-width: none; }
  .nx-grid.is-scroll::-webkit-scrollbar { display: none; }
  .nx-grid.is-scroll > * { scroll-snap-align: center; }
}

.nx-card {
  position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--nx-line); border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(14, 20, 48, .04), 0 8px 24px rgba(14, 20, 48, .05);
  transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.22, 1, .36, 1);
}
a.nx-card { color: inherit; text-decoration: none; }
a.nx-card:hover, .nx-card.is-hover:hover { border-color: var(--nx-blue); transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(35, 98, 236, .08), 0 16px 40px rgba(14, 20, 48, .08); }
.nx-card h3 { margin: 0 0 10px; color: var(--nx-ink); font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.nx-card p { margin: 0; color: var(--nx-muted); font-size: 15.5px; line-height: 1.6; }
.nx-card .nx-ui { margin-top: 24px; }
.nx-card-tag { align-self: flex-start; margin: 0 0 14px; padding: 4px 10px; border-radius: 999px; background: #EEF3FF; color: var(--nx-blue); font-size: 12.5px; font-weight: 700; }
.nx-num {
  display: grid; place-items: center; width: 36px; height: 36px; margin: 0 0 18px; border-radius: 50%;
  background: var(--nx-blue); color: #fff; font-size: 15px; font-weight: 700;
}
.nx-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 18px; border-radius: 12px; background: #EEF3FF; color: var(--nx-blue); }
.nx-icon svg { width: 22px; height: 22px; }
.nx-link { margin-top: auto; padding-top: 18px; color: var(--nx-blue); font-size: 15px; font-weight: 600; }
.is-soft .nx-card { background: #fff; }
.is-dark .nx-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.is-dark .nx-card h3 { color: #fff; }
.is-dark .nx-card p { color: rgba(255, 255, 255, .78); }
.is-dark .nx-icon, .is-dark .nx-card-tag { background: rgba(217, 227, 253, .12); color: #A9C1FA; }

/* ---------- Due colonne: testo + visual ---------- */
.nx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.nx-split.is-reverse > :first-child { order: 2; }
.nx-split .nx-actions { justify-content: flex-start; }
@media (max-width: 980px) { .nx-split { grid-template-columns: 1fr; gap: 40px; } .nx-split.is-reverse > :first-child { order: 0; } }

/* ---------- Liste con spunta ---------- */
.nx-list { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.nx-list.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 640px) { .nx-list.is-2 { grid-template-columns: 1fr; } }
.nx-list li { position: relative; padding-left: 32px; color: var(--nx-ink); font-size: 16.5px; line-height: 1.5; }
.nx-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #EAF6F2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%2317664F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px; background-repeat: no-repeat; background-position: center;
}
.is-dark .nx-list li { color: #fff; }
.is-dark .nx-list li::before { background-color: rgba(177, 219, 210, .18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23B1DBD2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- Numeri grandi ---------- */
.nx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; }
.nx-stats b { display: block; color: var(--nx-ink); font-family: "Montserrat", system-ui, sans-serif; font-size: clamp(34px, 4vw, 48px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.nx-stats span { display: block; margin-top: 8px; color: var(--nx-muted); font-size: 15px; }
.is-dark .nx-stats b { color: #fff; } .is-dark .nx-stats span { color: rgba(255, 255, 255, .78); }

/* ---------- Finestra app (mockup) ---------- */
.nx-app { position: relative; border-radius: 20px; background: #fff; color: var(--nx-ink); overflow: hidden;
  box-shadow: 0 0 0 1px var(--nx-line), 0 40px 100px -40px rgba(35, 98, 236, .45); }
.is-dark .nx-app, .nx-hero .nx-app { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 120px -30px rgba(35, 98, 236, .7); }
.nx-app-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid #EEF2FC; }
.nx-app-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--nx-lavender); }
.nx-app-bar strong { margin-left: 8px; font-size: 14px; }
.nx-app-bar span { margin-left: auto; color: var(--nx-blue); font-size: 13px; font-weight: 700; }
.nx-app-body { display: grid; gap: 10px; padding: 20px; }
/* righe riusabili dentro .nx-app-body o .fx-ui */
.nx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--nx-soft); border: 1px solid #E6ECFA; font-size: 14px; }
.nx-row b { color: var(--nx-ink); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-row span { flex: 0 0 auto; color: var(--nx-muted); font-size: 13px; }
.nx-row .ok { color: var(--nx-green-text); font-weight: 600; }
.nx-row .hi { color: var(--nx-blue); font-weight: 700; }
.nx-bar { height: 6px; border-radius: 9px; background: #E6ECFA; overflow: hidden; }
.nx-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2362EC, #45B08F); }

/* ---------- FAQ ---------- */
.nx-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.nx-faq details { border: 1px solid var(--nx-line); border-radius: 14px; background: #fff; }
.nx-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none;
  color: var(--nx-ink); font-size: 17px; font-weight: 600; }
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--nx-blue); font-size: 22px; font-weight: 500; line-height: 1; transition: transform .25s; }
.nx-faq details[open] summary::after { transform: rotate(45deg); }
.nx-faq details > div, .nx-faq details > p { margin: 0; padding: 0 22px 20px; color: var(--nx-muted); font-size: 16px; line-height: 1.65; }

/* ---------- CTA finale ---------- */
.nx-cta {
  position: relative; overflow: hidden; isolation: isolate; padding: 80px 32px; border-radius: 28px; text-align: center; color: #fff;
  background: radial-gradient(600px 300px at 15% 10%, rgba(35, 98, 236, .5), transparent 60%),
              radial-gradient(500px 300px at 90% 100%, rgba(69, 176, 143, .18), transparent 60%), var(--nx-night);
}
.nx-cta .nx-sub { margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, .82); }
.nx-cta .f-btn:not(.primary) { color: #fff; border-color: rgba(217, 227, 253, .45); background: rgba(255, 255, 255, .06); }
@media (max-width: 560px) { .nx-cta { padding: 48px 22px; border-radius: 22px; } }

/* ---------- Ingresso morbido allo scroll (aggiunto da nx.js) ---------- */
.nx-js .nx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--nx-d, 0) * 90ms); }
.nx-js .nx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nx-js .nx-reveal { opacity: 1; transform: none; transition: none; } }

/* titolo CTA sempre bianco (sovrascrive la regola generale dei titoli nx) */
main.fundo > section .nx-cta h2 { color: #fff; }
.nx-cta .nx-kicker { color: #A9C1FA; }