/* ==========================================================================
   NUTRIMI · Design System pubblico "Organic Precision"
   --------------------------------------------------------------------------
   Caricato DOPO styles.css. Tutto e' namespaced sotto .nx / body.nx-page in
   modo che il portale professionisti (dashboard, form, admin) resti intatto.
   Nessuno stile inline: la Content-Security-Policy del sito e' style-src 'self'.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
  --nx-bg: #f2f7f1;
  --nx-bg-deep: #e6f0e5;
  --nx-surface: #ffffff;
  --nx-surface-2: #f8fbf7;
  --nx-surface-3: #eef5ed;
  --nx-ink: #0d2a1c;
  --nx-ink-soft: #2f4438;
  --nx-muted: #61756a;
  --nx-line: #dae7db;
  --nx-line-strong: #c3d7c6;

  --nx-green: #2f7d4a;
  --nx-green-bright: #45b26b;
  --nx-mint: #a9e5c1;
  --nx-mint-soft: #d9f2e2;
  --nx-accent: #ff5a27;
  --nx-accent-soft: #ffe3d8;
  --nx-amber: #eb9a24;
  --nx-amber-soft: #fdeed3;
  --nx-violet: #6d3fa8;
  --nx-violet-soft: #ece2f8;
  --nx-sky: #2f7fbf;
  --nx-sky-soft: #dcecf8;

  --nx-shadow-s: 0 2px 8px rgba(13, 42, 28, .05), 0 1px 2px rgba(13, 42, 28, .04);
  --nx-shadow-m: 0 12px 30px -12px rgba(13, 42, 28, .18), 0 2px 8px rgba(13, 42, 28, .05);
  --nx-shadow-l: 0 34px 70px -28px rgba(13, 42, 28, .32), 0 8px 22px -12px rgba(13, 42, 28, .14);
  --nx-shadow-xl: 0 60px 120px -40px rgba(13, 42, 28, .42), 0 12px 32px -16px rgba(13, 42, 28, .18);

  --nx-r-s: 12px;
  --nx-r-m: 18px;
  --nx-r-l: 26px;
  --nx-r-xl: 34px;
  --nx-r-pill: 999px;

  --nx-max: 1240px;
  --nx-gutter: clamp(18px, 5vw, 44px);
  --nx-section: clamp(64px, 9vw, 116px);

  --nx-ease: cubic-bezier(.22, .61, .36, 1);
  --nx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --nx-spring: cubic-bezier(.34, 1.4, .64, 1);

  --nx-font: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui,
    -apple-system, "SF Pro Display", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --nx-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --nx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  --nx-bg: #061310;
  --nx-bg-deep: #04100c;
  --nx-surface: #0e2419;
  --nx-surface-2: #123020;
  --nx-surface-3: #16382a;
  --nx-ink: #e9f6ec;
  --nx-ink-soft: #c4dccb;
  --nx-muted: #91ab9c;
  --nx-line: #1d4130;
  --nx-line-strong: #2b5941;

  --nx-green: #58c47f;
  --nx-green-bright: #6fdc95;
  --nx-mint: #8fdcae;
  --nx-mint-soft: #143a26;
  --nx-accent: #ff7448;
  --nx-accent-soft: #40190e;
  --nx-amber: #f2b155;
  --nx-amber-soft: #3a2a10;
  --nx-violet: #b18ae0;
  --nx-violet-soft: #291a3c;
  --nx-sky: #6fb2e4;
  --nx-sky-soft: #12293a;

  --nx-shadow-s: 0 2px 8px rgba(0, 0, 0, .4);
  --nx-shadow-m: 0 14px 32px -14px rgba(0, 0, 0, .7);
  --nx-shadow-l: 0 34px 70px -28px rgba(0, 0, 0, .8);
  --nx-shadow-xl: 0 60px 120px -40px rgba(0, 0, 0, .9);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
:root:has(body.nx-page),
:root:has(body.nx-public) { overflow-x: clip; }

.hidden { display: none !important; }

body.nx-page {
  margin: 0;
  color: var(--nx-ink);
  background: var(--nx-bg);
  font-family: var(--nx-font);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.nx,
.nx * {
  box-sizing: border-box;
}

.nx {
  position: relative;
  font-family: var(--nx-font);
  color: var(--nx-ink);
  line-height: 1.6;
}

/* --- convivenza con il portale ------------------------------------------
   index.html contiene sia la home pubblica sia la SPA del portale. Il tema
   scuro e il fondo nuovo valgono SOLO quando la home pubblica e' a schermo:
   la dashboard professionisti non ha stili scuri e deve restare chiara. */
#authView.nx {
  display: block;
  background: var(--nx-bg);
  color: var(--nx-ink);
  font-family: var(--nx-font);
  -webkit-font-smoothing: antialiased;
}

/* La classe nx-public la mette nutrimi.js quando #authView esce da .hidden:
   piu' affidabile di :has() e non dipende dal supporto del selettore. */
body.nx-public,
body.nx-booting {
  margin: 0;
  color: var(--nx-ink);
  background: var(--nx-bg);
  font-family: var(--nx-font);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
body.nx-public > .shell > .topbar,
body.nx-public > .shell > .site-footer,
body.nx-booting > .shell > .topbar,
body.nx-booting > .shell > .site-footer { display: none; }
body.nx-public > .shell { overflow-x: clip; }

.nx img { max-width: 100%; }

/* Utilita' ridefinite anche qui: le pagine pubbliche nuove non caricano
   styles.css, che e' il foglio della SPA del portale. */
.nx .hidden { display: none !important; }
.nx .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nx-wrap {
  width: min(var(--nx-max), 100% - var(--nx-gutter) * 2);
  margin-inline: auto;
}

.nx-wrap-narrow {
  width: min(880px, 100% - var(--nx-gutter) * 2);
  margin-inline: auto;
}

.nx-section {
  position: relative;
  padding-block: var(--nx-section);
}

.nx-section-tight { padding-block: clamp(48px, 7vw, 92px); }
/* Evita che il padding della sezione e quello del blocco interno si sommino
   lasciando centinaia di pixel vuoti fra un contenuto e il successivo. */
.nx-section > .nx-section-tight:last-child { padding-bottom: 0; }

/* --- tipografia --- */
.nx h1, .nx h2, .nx h3, .nx h4 {
  margin: 0;
  color: var(--nx-ink);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}

.nx h1 { font-size: clamp(2.5rem, 6.2vw, 4.9rem); letter-spacing: -.045em; }
.nx h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); letter-spacing: -.04em; }
.nx h3 { font-size: clamp(1.15rem, 1.9vw, 1.55rem); letter-spacing: -.025em; line-height: 1.2; }
.nx h4 { font-size: 1.02rem; letter-spacing: -.015em; }

.nx p { margin: 0; color: var(--nx-muted); }
.nx .nx-lead {
  font-size: clamp(1.06rem, 1.55vw, 1.28rem);
  line-height: 1.62;
  color: var(--nx-ink-soft);
  text-wrap: pretty;
}

/* :where() azzera la specificita': senza, questa regola (0,1,1) batteva
   .nx-btn-primary (0,1,0) e ogni bottone-link ereditava il colore del testo
   invece del proprio. */
.nx :where(a) { color: inherit; text-decoration: none; }

.nx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nx-green);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nx-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
}
.nx-eyebrow.is-plain::before { display: none; }

.nx-head { max-width: 780px; display: grid; gap: 18px; }
.nx-head.is-center { max-width: 820px; margin-inline: auto; text-align: center; justify-items: center; }

.nx-grad {
  background: linear-gradient(100deg, var(--nx-green) 0%, var(--nx-green-bright) 46%, #ff6a34 78%, var(--nx-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nx-underline {
  position: relative;
  white-space: nowrap;
}
.nx-underline::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.04em;
  bottom: .04em;
  height: .26em;
  z-index: -1;
  border-radius: .14em;
  background: linear-gradient(90deg, var(--nx-mint), var(--nx-accent-soft));
  transform: scaleX(var(--nx-uw, 1));
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   3. Sfondi ed effetti
   -------------------------------------------------------------------------- */
.nx-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.nx-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .5;
  will-change: transform;
}
.nx-aurora i:nth-child(1) {
  width: 46vw; height: 46vw; min-width: 320px; min-height: 320px;
  top: -14vw; left: -8vw;
  background: radial-gradient(circle, rgba(69, 178, 107, .55), transparent 68%);
  animation: nx-drift-a 26s var(--nx-ease) infinite alternate;
}
.nx-aurora i:nth-child(2) {
  width: 38vw; height: 38vw; min-width: 280px; min-height: 280px;
  top: 4vw; right: -10vw;
  background: radial-gradient(circle, rgba(255, 90, 39, .32), transparent 68%);
  animation: nx-drift-b 31s var(--nx-ease) infinite alternate;
}
.nx-aurora i:nth-child(3) {
  width: 34vw; height: 34vw; min-width: 240px; min-height: 240px;
  bottom: -12vw; left: 32%;
  background: radial-gradient(circle, rgba(109, 63, 168, .24), transparent 68%);
  animation: nx-drift-c 37s var(--nx-ease) infinite alternate;
}
:root[data-theme="dark"] .nx-aurora i { opacity: .34; filter: blur(88px); }

@keyframes nx-drift-a { to { transform: translate3d(9vw, 7vw, 0) scale(1.22); } }
@keyframes nx-drift-b { to { transform: translate3d(-11vw, 9vw, 0) scale(1.15); } }
@keyframes nx-drift-c { to { transform: translate3d(7vw, -8vw, 0) scale(1.28); } }

.nx-grain-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--nx-grain);
  opacity: .028;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .nx-grain-layer { mix-blend-mode: screen; opacity: .05; }

.nx-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 4%, rgba(69, 178, 107, .12), transparent 62%),
    radial-gradient(48% 44% at 92% 16%, rgba(255, 90, 39, .09), transparent 62%),
    radial-gradient(52% 40% at 50% 100%, rgba(109, 63, 168, .07), transparent 62%);
}

/* griglia sottile decorativa */
.nx-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--nx-line) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--nx-line) 70%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(75% 60% at 50% 40%, #000 0%, transparent 78%);
  opacity: .5;
}

/* --------------------------------------------------------------------------
   4. Navigazione
   -------------------------------------------------------------------------- */
.nx-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 90;
  transform-origin: left center;
  transform: scaleX(var(--nx-scroll, 0));
  background: linear-gradient(90deg, var(--nx-green), var(--nx-green-bright) 45%, var(--nx-accent));
  pointer-events: none;
}

.nx-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: 14px;
  transition: padding .35s var(--nx-ease), background .35s var(--nx-ease), box-shadow .35s var(--nx-ease);
}
.nx-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: color-mix(in srgb, var(--nx-bg) 78%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent;
  transition: opacity .35s var(--nx-ease), border-color .35s var(--nx-ease);
}
.nx-nav.is-stuck { padding-block: 8px; }
.nx-nav.is-stuck::before { opacity: 1; border-bottom-color: var(--nx-line); }

.nx-nav-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
}

.nx-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  color: var(--nx-ink);
  font-weight: 800;
  letter-spacing: -.02em;
}
.nx-logo-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: transparent;
  background: #75dfe2 url("/images/app/nutrimi-app-icon-round.png") center / cover no-repeat;
  box-shadow: var(--nx-shadow-s), inset 0 1px 0 rgba(255, 255, 255, .28);
  font-size: 0;
  font-weight: 900;
  overflow: hidden;
  transition: transform .5s var(--nx-spring);
}
.nx-logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.nx-logo-mark-app {
  border-radius: 50%;
  background-color: #75dfe2;
}
.nx-logo-mark::after { display: none; }
.nx-logo:hover .nx-logo-mark { transform: rotate(-8deg) scale(1.06); }
.nx-logo-text { display: grid; line-height: 1.1; }
.nx-logo-text b { font-size: 1.02rem; letter-spacing: .01em; }
.nx-logo-text small {
  color: var(--nx-muted);
  font-size: .655rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.nx-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}
.nx-nav-links a {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--nx-r-pill);
  color: var(--nx-ink-soft);
  font-size: .89rem;
  font-weight: 650;
  white-space: nowrap;
  transition: color .25s var(--nx-ease), background .25s var(--nx-ease);
}
.nx-nav-links a:hover { color: var(--nx-ink); background: color-mix(in srgb, var(--nx-surface) 70%, transparent); }
.nx-nav-links a.is-active { color: var(--nx-green); }
.nx-nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: currentColor;
}

.nx-nav-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.nx-theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--nx-line);
  border-radius: 50%;
  color: var(--nx-ink-soft);
  background: color-mix(in srgb, var(--nx-surface) 72%, transparent);
  cursor: pointer;
  transition: transform .4s var(--nx-spring), background .25s var(--nx-ease), color .25s var(--nx-ease);
}
.nx-theme-toggle:hover { transform: rotate(28deg) scale(1.07); color: var(--nx-green); }
.nx-theme-toggle svg { width: 18px; height: 18px; }
.nx-theme-toggle .nx-icon-moon { display: none; }
:root[data-theme="dark"] .nx-theme-toggle .nx-icon-moon { display: block; }
:root[data-theme="dark"] .nx-theme-toggle .nx-icon-sun { display: none; }

.nx-burger {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--nx-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--nx-surface) 72%, transparent);
  cursor: pointer;
}
.nx-burger span {
  position: relative;
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--nx-ink);
  transition: transform .35s var(--nx-ease), opacity .2s linear;
}
.nx-burger span::before,
.nx-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: inherit;
  transition: transform .35s var(--nx-ease);
}
.nx-burger span::before { top: -6px; }
.nx-burger span::after { top: 6px; }
.nx-burger[aria-expanded="true"] span { background: transparent; }
.nx-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); background: var(--nx-ink); }
.nx-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); background: var(--nx-ink); }

/* --------------------------------------------------------------------------
   5. Bottoni
   -------------------------------------------------------------------------- */
.nx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--nx-r-pill);
  color: var(--nx-ink);
  background: transparent;
  font-family: inherit;
  font-size: .93rem;
  font-weight: 750;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(var(--nx-mx, 0), var(--nx-my, 0), 0);
  transition: transform .35s var(--nx-ease-out), box-shadow .3s var(--nx-ease), background .25s var(--nx-ease), border-color .25s var(--nx-ease), color .25s var(--nx-ease);
}
.nx-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.nx-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--nx-accent) 0%, #ff7d4c 52%, #ff4d16 100%);
  box-shadow: 0 12px 28px -12px rgba(255, 90, 39, .82), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.nx-btn-primary::after {
  content: "";
  position: absolute;
  inset: -50% -80%;
  z-index: -1;
  background: linear-gradient(74deg, transparent 40%, rgba(255, 255, 255, .42) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .85s var(--nx-ease);
}
.nx-btn-primary:hover { box-shadow: 0 20px 40px -14px rgba(255, 90, 39, .9), inset 0 1px 0 rgba(255, 255, 255, .34); }
.nx-btn-primary:hover::after { transform: translateX(100%); }

.nx-btn-dark {
  color: #fff;
  background: linear-gradient(135deg, #1b5c35, #0d2a1c);
  box-shadow: 0 12px 28px -14px rgba(13, 42, 28, .8), inset 0 1px 0 rgba(255, 255, 255, .16);
}
:root[data-theme="dark"] .nx-btn-dark {
  color: #06140e;
  background: linear-gradient(135deg, var(--nx-mint), var(--nx-green-bright));
}

.nx-btn-soft {
  color: var(--nx-ink);
  background: color-mix(in srgb, var(--nx-surface) 82%, transparent);
  border-color: var(--nx-line);
  box-shadow: var(--nx-shadow-s);
}
.nx-btn-soft:hover { border-color: var(--nx-line-strong); background: var(--nx-surface); }

.nx-btn-ghost { color: var(--nx-ink-soft); border-color: transparent; }
.nx-btn-ghost:hover { color: var(--nx-ink); background: color-mix(in srgb, var(--nx-surface) 74%, transparent); }

.nx-btn-lg { min-height: 56px; padding: 16px 30px; font-size: 1rem; }
.nx-btn-block { width: 100%; }

.nx-btn:focus-visible,
.nx a:focus-visible,
.nx button:focus-visible,
.nx summary:focus-visible,
.nx input:focus-visible {
  outline: 3px solid var(--nx-amber);
  outline-offset: 3px;
}

.nx-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--nx-green);
  font-weight: 750;
  font-size: .92rem;
}
.nx-link-arrow svg { width: 15px; height: 15px; transition: transform .35s var(--nx-spring); }
.nx-link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.nx-hero {
  position: relative;
  padding-block: clamp(48px, 8vw, 104px) clamp(56px, 8vw, 110px);
  overflow: clip;
}
.nx-hero-inner { position: relative; z-index: 2; }

.nx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.nx-hero-copy { display: grid; gap: 24px; justify-items: start; }

.nx-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 9px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-pill);
  color: var(--nx-ink-soft);
  background: color-mix(in srgb, var(--nx-surface) 74%, transparent);
  box-shadow: var(--nx-shadow-s);
  font-size: .8rem;
  font-weight: 650;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.nx-badge b { color: var(--nx-ink); font-weight: 800; }
.nx-badge-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--nx-green-bright);
}
.nx-badge-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--nx-green-bright);
  opacity: 0;
  animation: nx-ping 2.4s var(--nx-ease) infinite;
}
@keyframes nx-ping {
  0% { transform: scale(.6); opacity: .8; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* rotatore di parole */
.nx-rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.06em;
}
.nx-rotator span {
  grid-area: 1 / 1;
  display: block;
  opacity: 0;
  transform: translateY(105%);
  transition: transform .72s var(--nx-ease-out), opacity .52s var(--nx-ease);
  white-space: nowrap;
}
.nx-rotator span.is-in { opacity: 1; transform: translateY(0); }
.nx-rotator span.is-out { opacity: 0; transform: translateY(-105%); }

.nx-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.nx-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 4px;
  color: var(--nx-muted);
  font-size: .855rem;
}
.nx-hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.nx-hero-proof svg { width: 15px; height: 15px; color: var(--nx-green); flex: 0 0 auto; }

/* --- scena telefono --- */
.nx-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  perspective: 1400px;
}
.nx-stage-halo {
  position: absolute;
  width: min(118%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nx-mint) 62%, transparent) 0%, transparent 62%);
  filter: blur(30px);
  opacity: .75;
  animation: nx-breathe 9s var(--nx-ease) infinite alternate;
}
@keyframes nx-breathe { to { transform: scale(1.11); opacity: .5; } }

.nx-stage-ring {
  position: absolute;
  width: 96%;
  max-width: min(480px, 88vw);
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--nx-green) 32%, transparent);
  border-radius: 50%;
  animation: nx-spin 46s linear infinite;
}
.nx-stage-ring::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--nx-accent);
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--nx-accent) 70%, transparent);
}
@keyframes nx-spin { to { transform: rotate(360deg); } }

.nx-phone {
  position: relative;
  z-index: 2;
  width: min(300px, 74vw);
  aspect-ratio: 9 / 19.5;
  padding: 9px;
  border-radius: 42px;
  background: linear-gradient(150deg, #253c31, #0a1a13 55%, #1d3228);
  box-shadow: var(--nx-shadow-xl), inset 0 0 0 1px rgba(255, 255, 255, .1);
  transform: rotateX(var(--nx-rx, 0deg)) rotateY(var(--nx-ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .5s var(--nx-ease-out);
}
.nx-phone::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 78px;
  height: 20px;
  z-index: 3;
  margin-left: -39px;
  border-radius: var(--nx-r-pill);
  background: #050d09;
}
.nx-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--nx-surface-3);
}
.nx-phone-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity .72s var(--nx-ease), transform 1.2s var(--nx-ease-out);
}
.nx-phone-screen img.is-active { opacity: 1; transform: scale(1); }

.nx-phone-caption {
  position: absolute;
  left: 50%;
  bottom: -22px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  transform: translateX(-50%);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-pill);
  color: var(--nx-ink);
  background: color-mix(in srgb, var(--nx-surface) 92%, transparent);
  box-shadow: var(--nx-shadow-m);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
}
.nx-phone-caption i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nx-accent);
}

/* pillole flottanti attorno al telefono */
.nx-float {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 11px 15px;
  border: 1px solid var(--nx-line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--nx-surface) 90%, transparent);
  box-shadow: var(--nx-shadow-m);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: nx-bob 6s var(--nx-ease) infinite alternate;
}
.nx-float b { color: var(--nx-ink); font-size: .81rem; font-weight: 800; }
.nx-float small { color: var(--nx-muted); font-size: .7rem; }
.nx-float-a { top: 9%; left: 0; animation-delay: -1.2s; }
.nx-float-b { top: 46%; right: 0; animation-delay: -3.4s; }
.nx-float-c { bottom: 14%; left: -2%; animation-delay: -2.1s; }
@media (max-width: 1240px) {
  .nx-float-a, .nx-float-c { left: -4%; }
  .nx-float-b { right: -4%; }
}
@keyframes nx-bob { to { transform: translateY(-13px); } }

/* --------------------------------------------------------------------------
   7. Marquee
   -------------------------------------------------------------------------- */
.nx-marquee {
  position: relative;
  z-index: 2;
  padding-block: 20px;
  border-block: 1px solid var(--nx-line);
  background: color-mix(in srgb, var(--nx-surface) 55%, transparent);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.nx-marquee-track {
  display: flex;
  width: max-content;
  gap: 46px;
  animation: nx-marquee 42s linear infinite;
}
.nx-marquee:hover .nx-marquee-track { animation-play-state: paused; }
.nx-marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nx-ink-soft);
  font-size: .87rem;
  font-weight: 700;
  white-space: nowrap;
}
.nx-marquee-track span svg { width: 16px; height: 16px; color: var(--nx-green); flex: 0 0 auto; }
@keyframes nx-marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   8. Le due porte
   -------------------------------------------------------------------------- */
.nx-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  margin-top: clamp(36px, 5vw, 60px);
}

.nx-door {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(26px, 3.2vw, 40px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-xl);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-m);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--nx-ease-out), box-shadow .5s var(--nx-ease), border-color .4s var(--nx-ease);
}
.nx-door::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(420px 320px at var(--nx-sx, 50%) var(--nx-sy, 0%), var(--nx-door-glow, rgba(69, 178, 107, .16)), transparent 72%);
  transition: opacity .45s var(--nx-ease);
}
.nx-door:hover { transform: translateY(-7px); box-shadow: var(--nx-shadow-l); border-color: var(--nx-line-strong); }
.nx-door:hover::before { opacity: 1; }

.nx-door-people { --nx-door-glow: rgba(255, 90, 39, .17); }
.nx-door-pro { --nx-door-glow: rgba(47, 125, 74, .2); }

.nx-door-top { display: flex; align-items: center; gap: 13px; }
.nx-door-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 16px;
  color: #fff;
  box-shadow: var(--nx-shadow-s);
}
.nx-door-people .nx-door-icon { background: linear-gradient(140deg, #ff7d4c, var(--nx-accent)); }
.nx-door-pro .nx-door-icon { background: linear-gradient(140deg, var(--nx-green-bright), #1b5c35); }
.nx-door-icon svg { width: 25px; height: 25px; }
.nx-door-tag {
  color: var(--nx-muted);
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nx-door-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nx-door-list li {
  position: relative;
  padding-left: 27px;
  color: var(--nx-ink-soft);
  font-size: .94rem;
  line-height: 1.5;
}
.nx-door-list li::before {
  content: "";
  position: absolute;
  top: .48em;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--nx-mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d4a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.nx-door-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* --------------------------------------------------------------------------
   9. Bento
   -------------------------------------------------------------------------- */
.nx-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(13px, 1.6vw, 20px);
  margin-top: clamp(34px, 4.6vw, 56px);
}

.nx-card {
  position: relative;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(22px, 2.5vw, 30px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  overflow: hidden;
  transition: transform .45s var(--nx-ease-out), box-shadow .45s var(--nx-ease), border-color .35s var(--nx-ease);
}
.nx-card:hover { transform: translateY(-5px); box-shadow: var(--nx-shadow-m); border-color: var(--nx-line-strong); }
.nx-card p { font-size: .93rem; line-height: 1.58; }

.nx-card-kicker {
  color: var(--nx-green);
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.nx-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--nx-green);
  background: var(--nx-mint-soft);
}
.nx-card-icon svg { width: 22px; height: 22px; }
.nx-card-icon.is-accent { color: var(--nx-accent); background: var(--nx-accent-soft); }
.nx-card-icon.is-violet { color: var(--nx-violet); background: var(--nx-violet-soft); }
.nx-card-icon.is-amber { color: var(--nx-amber); background: var(--nx-amber-soft); }
.nx-card-icon.is-sky { color: var(--nx-sky); background: var(--nx-sky-soft); }

.nx-col-2 { grid-column: span 2; }
.nx-col-3 { grid-column: span 3; }
.nx-col-4 { grid-column: span 4; }
.nx-col-6 { grid-column: span 6; }

/* card con screenshot reale: telefono INTERO accanto al testo.
   Gli screenshot nativi sono larghi ~370 px, quindi vengono mostrati a circa
   meta' larghezza: cosi' restano nitidi su schermi ad alta densita' e si vede
   tutta la schermata, non una fetta senza contesto. */
.nx-card-shot {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
  padding: clamp(20px, 2.2vw, 28px);
}
.nx-card-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(70% 90% at 0% 50%, color-mix(in srgb, var(--nx-mint) 34%, transparent), transparent 70%);
  opacity: .55;
  pointer-events: none;
}
.nx-card-shot > * { position: relative; z-index: 1; }

.nx-card-shot-window {
  width: 186px;
  flex: 0 0 auto;
  padding: 7px;
  border-radius: 26px;
  background: linear-gradient(155deg, #35503f, #08150f 62%, #22392c);
  box-shadow: var(--nx-shadow-l), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .5s var(--nx-ease-out);
}
.nx-card-shot:hover .nx-card-shot-window { transform: translateY(-6px); }
.nx-card-shot-window img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: var(--nx-surface-3);
}

.nx-card-shot-body {
  display: grid;
  gap: 9px;
  align-content: center;
  padding: 0;
  background: none;
}
.nx-card-shot-body h3 { color: var(--nx-ink); }
.nx-card-shot-body p { color: var(--nx-muted); font-size: .92rem; }
.nx-card-shot-body .nx-card-kicker { color: var(--nx-green); }

/* Card con una sola schermata ma a piena larghezza: il telefono cresce e il
   testo resta su una misura leggibile invece di stendersi per 1000 px. */
.nx-card-shot.nx-col-6:not(.nx-card-langs) .nx-card-shot-window { width: 232px; }
.nx-card-shot.nx-col-6:not(.nx-card-langs) .nx-card-shot-body { max-width: 74ch; }

/* Card a piena larghezza con piu' telefoni affiancati: serve a mostrare che
   la stessa schermata esiste in lingue diverse, non un solo esempio. */
.nx-card-langs {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(22px, 2.4vw, 32px);
}
.nx-lang-stack {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
}
.nx-lang-stack figure {
  position: relative;
  display: grid;
  gap: 9px;
  justify-items: center;
  margin: 0;
  transition: transform .5s var(--nx-ease-out);
}
.nx-lang-stack figure:nth-child(1) { transform: rotate(-3deg); }
.nx-lang-stack figure:nth-child(3) { transform: rotate(3deg); }
.nx-card-langs:hover .nx-lang-stack figure { transform: rotate(0deg) translateY(-6px); }
.nx-lang-stack .nx-card-shot-window { width: clamp(112px, 12vw, 158px); }
.nx-lang-stack figcaption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-pill);
  color: var(--nx-ink);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nx-lang-more {
  display: grid;
  place-items: center;
  gap: 2px;
  width: clamp(64px, 7vw, 84px);
  padding: 16px 8px;
  border: 1px dashed var(--nx-line-strong);
  border-radius: var(--nx-r-l);
  color: var(--nx-green);
  background: var(--nx-surface-2);
  text-align: center;
}
.nx-lang-more b { font-size: 1.5rem; font-weight: 850; letter-spacing: -.04em; line-height: 1; }
.nx-lang-more small { color: var(--nx-muted); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 900px) {
  .nx-card-langs { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .nx-lang-stack { flex-wrap: wrap; justify-content: center; }
}

/* Coppia di schermate: due momenti della stessa azione, il secondo sfalsato
   dietro il primo. Serve quando una schermata sola non racconta il flusso
   (es. la scomposizione di un piatto continua sotto). */
.nx-shot-pair { position: relative; width: 214px; flex: 0 0 auto; }
.nx-shot-pair .nx-card-shot-window { width: 168px; }
.nx-shot-pair .nx-card-shot-window:first-child {
  position: relative;
  z-index: 2;
}
.nx-shot-pair .nx-card-shot-window:last-child {
  position: absolute;
  top: 26px;
  right: 0;
  z-index: 1;
  width: 148px;
  opacity: .92;
  transform: rotate(4deg);
  transition: transform .55s var(--nx-ease-out);
}
.nx-card-shot:hover .nx-shot-pair .nx-card-shot-window:last-child {
  transform: rotate(7deg) translate(8px, -6px);
}
@media (max-width: 1080px) {
  .nx-shot-pair { width: 196px; margin-inline: auto; }
  .nx-shot-pair .nx-card-shot-window { width: 152px; }
  .nx-shot-pair .nx-card-shot-window:last-child { width: 132px; }
}

/* Card strette: il telefono passa sopra al testo, centrato. */
@media (max-width: 1080px) {
  .nx-card-shot { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .nx-card-shot-window { width: 168px; }
  .nx-card-shot-body { justify-items: center; }
}

/* card scura */
.nx-card-dark {
  color: #eaf6ec;
  background: linear-gradient(155deg, #123b26, #071711);
  border-color: rgba(255, 255, 255, .09);
}
.nx-card-dark h3 { color: #fff; }
.nx-card-dark p { color: rgba(233, 246, 236, .74); }
.nx-card-dark .nx-card-kicker { color: var(--nx-mint); }
.nx-card-dark .nx-card-icon { color: var(--nx-mint); background: rgba(169, 229, 193, .13); }

/* mini elenco dentro le card */
.nx-chiplist { display: flex; flex-wrap: wrap; gap: 7px; }
.nx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-pill);
  color: var(--nx-ink-soft);
  background: var(--nx-surface-2);
  font-size: .79rem;
  font-weight: 650;
}
.nx-card-dark .nx-chip {
  color: rgba(233, 246, 236, .88);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .12);
}

/* --------------------------------------------------------------------------
   10. Statistiche animate
   -------------------------------------------------------------------------- */
.nx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.nx-stat {
  display: grid;
  gap: 5px;
  padding: 24px 22px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  transition: transform .4s var(--nx-ease-out), border-color .3s var(--nx-ease);
}
.nx-stat:hover { transform: translateY(-4px); border-color: var(--nx-green); }
.nx-stat b {
  color: var(--nx-ink);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 850;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.nx-stat strong { color: var(--nx-ink); font-size: .92rem; font-weight: 750; }
.nx-stat small { color: var(--nx-muted); font-size: .8rem; line-height: 1.45; }

/* --------------------------------------------------------------------------
   11. Flusso / ponte
   -------------------------------------------------------------------------- */
.nx-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  margin-top: clamp(34px, 4.6vw, 54px);
}
.nx-flow::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--nx-line-strong) 0 7px, transparent 7px 15px);
}
.nx-flow-step {
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}
.nx-flow-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(140deg, var(--nx-green-bright), #1b5c35);
  box-shadow: 0 16px 32px -16px rgba(27, 92, 53, .9);
  font-size: 1.25rem;
  font-weight: 850;
  transition: transform .5s var(--nx-spring);
}
.nx-flow-step:hover .nx-flow-num { transform: translateY(-6px) rotate(-6deg); }
.nx-flow-step:nth-child(2) .nx-flow-num { background: linear-gradient(140deg, #ff7d4c, var(--nx-accent)); box-shadow: 0 16px 32px -16px rgba(255, 90, 39, .9); }
.nx-flow-step:nth-child(3) .nx-flow-num { background: linear-gradient(140deg, #8e63c6, var(--nx-violet)); box-shadow: 0 16px 32px -16px rgba(109, 63, 168, .9); }
.nx-flow-step h3 { font-size: 1.18rem; }
.nx-flow-step p { font-size: .92rem; max-width: 32ch; }

/* consenso granulare */
.nx-consent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(30px, 5vw, 66px);
}
.nx-consent-panel {
  display: grid;
  gap: 11px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-xl);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-l);
}
.nx-consent-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-m);
  background: var(--nx-surface-2);
  transition: border-color .3s var(--nx-ease), background .3s var(--nx-ease);
}
.nx-consent-row:hover { border-color: var(--nx-green); }
.nx-consent-row i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--nx-green);
  background: var(--nx-mint-soft);
}
.nx-consent-row i svg { width: 19px; height: 19px; }
.nx-consent-row b { display: block; color: var(--nx-ink); font-size: .93rem; }
.nx-consent-row small { display: block; color: var(--nx-muted); font-size: .79rem; line-height: 1.4; }

.nx-switch {
  position: relative;
  width: 46px;
  height: 27px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--nx-r-pill);
  background: var(--nx-line-strong);
  cursor: pointer;
  transition: background .35s var(--nx-ease);
}
.nx-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
  transition: transform .38s var(--nx-spring);
}
.nx-switch[aria-checked="true"] { background: var(--nx-green); }
.nx-switch[aria-checked="true"]::after { transform: translateX(19px); }

.nx-consent-out {
  display: grid;
  gap: 7px;
  margin-top: 6px;
  padding: 16px 18px;
  border: 1px dashed var(--nx-line-strong);
  border-radius: var(--nx-r-m);
  background: var(--nx-surface-3);
}
.nx-consent-out b { color: var(--nx-ink); font-size: .85rem; }
.nx-consent-out p { font-size: .84rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   12. Prezzi
   -------------------------------------------------------------------------- */
.nx-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-pill);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
}
.nx-tabs button {
  position: relative;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--nx-r-pill);
  color: var(--nx-muted);
  background: transparent;
  font-family: inherit;
  font-size: .89rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s var(--nx-ease);
}
/* Lo sfondo sta sul bottone selezionato, non su un cursore separato: se il
   JS non gira, la scheda attiva resta comunque leggibile. */
.nx-tabs button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--nx-green-bright), #1b5c35);
  box-shadow: 0 6px 16px -8px rgba(27, 92, 53, .9);
}
.nx-tabs button:hover[aria-selected="false"] { color: var(--nx-ink); }

.nx-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(28px, 3.6vw, 44px);
  align-items: stretch;
}

.nx-price {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  padding: clamp(24px, 2.8vw, 32px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-xl);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  transition: transform .45s var(--nx-ease-out), box-shadow .45s var(--nx-ease), border-color .35s var(--nx-ease);
}
.nx-price:hover { transform: translateY(-6px); box-shadow: var(--nx-shadow-m); }
.nx-price.is-featured {
  border-color: transparent;
  box-shadow: var(--nx-shadow-l);
  background:
    linear-gradient(var(--nx-surface), var(--nx-surface)) padding-box,
    linear-gradient(150deg, var(--nx-green-bright), var(--nx-accent)) border-box;
  border: 2px solid transparent;
}
.nx-price-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: var(--nx-r-pill);
  color: #fff;
  background: linear-gradient(135deg, var(--nx-green-bright), #1b5c35);
  box-shadow: var(--nx-shadow-s);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nx-price-name { display: grid; gap: 5px; }
.nx-price-name strong { color: var(--nx-ink); font-size: 1.16rem; font-weight: 800; }
.nx-price-name small { color: var(--nx-muted); font-size: .85rem; line-height: 1.45; }

.nx-price-amount { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.nx-price-amount b {
  color: var(--nx-ink);
  font-size: clamp(2.1rem, 3.4vw, 2.7rem);
  font-weight: 850;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.nx-price-amount span { color: var(--nx-muted); font-size: .88rem; font-weight: 650; }
.nx-price-note { color: var(--nx-green); font-size: .8rem; font-weight: 750; min-height: 1.2em; }

.nx-price-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; align-content: start; }
.nx-price-list li {
  position: relative;
  padding-left: 25px;
  color: var(--nx-ink-soft);
  font-size: .89rem;
  line-height: 1.5;
}
.nx-price-list li::before {
  content: "";
  position: absolute;
  top: .42em;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nx-mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d4a' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.nx-price-list li.is-off { color: var(--nx-muted); }
.nx-price-list li.is-off::before {
  background: var(--nx-surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361756a' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.nx-price-foot { display: grid; gap: 8px; }
.nx-price-legal { color: var(--nx-muted); font-size: .74rem; line-height: 1.45; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.nx-faq { display: grid; gap: 10px; margin-top: clamp(28px, 3.6vw, 44px); }
.nx-faq details {
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  overflow: hidden;
  transition: border-color .3s var(--nx-ease), box-shadow .3s var(--nx-ease);
}
.nx-faq details[open] { border-color: var(--nx-line-strong); box-shadow: var(--nx-shadow-m); }
.nx-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px clamp(18px, 2.2vw, 26px);
  color: var(--nx-ink);
  font-size: 1.01rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::after {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .42s var(--nx-spring);
}
.nx-faq details[open] summary::after { transform: rotate(135deg); color: var(--nx-accent); }
.nx-faq-body { padding: 0 clamp(18px, 2.2vw, 26px) 21px; }
.nx-faq-body p { font-size: .94rem; line-height: 1.62; }
.nx-faq-body p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   14. CTA finale
   -------------------------------------------------------------------------- */
.nx-cta {
  position: relative;
  display: grid;
  gap: 22px;
  justify-items: center;
  padding: clamp(38px, 6vw, 76px) clamp(24px, 4vw, 60px);
  border-radius: var(--nx-r-xl);
  text-align: center;
  color: #eaf6ec;
  background: linear-gradient(140deg, #17462d 0%, #0a1f16 58%, #12382a 100%);
  box-shadow: var(--nx-shadow-l);
  overflow: hidden;
  isolation: isolate;
}
.nx-cta::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(38% 38% at 22% 24%, rgba(69, 178, 107, .38), transparent 66%),
    radial-gradient(34% 34% at 80% 74%, rgba(255, 90, 39, .3), transparent 66%);
  animation: nx-drift-a 24s var(--nx-ease) infinite alternate;
}
.nx-cta h2 { color: #fff; }
.nx-cta p { color: rgba(233, 246, 236, .82); max-width: 62ch; }
.nx-cta .nx-eyebrow { color: var(--nx-mint); }
.nx-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Su fondo scuro il bottone chiaro deve restare pieno, non semitrasparente. */
.nx-cta .nx-btn-soft {
  color: #0a1f16;
  background: #f2f7f1;
  border-color: transparent;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .7);
}
.nx-cta .nx-btn-soft:hover { background: #fff; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.nx-footer {
  position: relative;
  z-index: 2;
  margin-top: clamp(56px, 8vw, 110px);
  padding-block: clamp(44px, 5vw, 70px) 30px;
  border-top: 1px solid var(--nx-line);
  background: color-mix(in srgb, var(--nx-surface) 46%, transparent);
}
.nx-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 46px);
}
.nx-footer-brand { display: grid; gap: 14px; align-content: start; max-width: 34ch; }
.nx-footer-brand p { font-size: .89rem; line-height: 1.6; }
.nx-footer-heading {
  margin: 0;
  color: var(--nx-ink);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nx-footer-col { display: grid; gap: 13px; align-content: start; }
.nx-footer-col nav { display: grid; gap: 9px; }
.nx-footer-col a {
  color: var(--nx-muted);
  font-size: .89rem;
  transition: color .25s var(--nx-ease), transform .25s var(--nx-ease);
}
.nx-footer-col a:hover { color: var(--nx-green); transform: translateX(3px); }
.nx-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--nx-line);
  color: var(--nx-muted);
  font-size: .8rem;
}
.nx-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.nx-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px 10px 15px;
  border: 1px solid var(--nx-line);
  border-radius: 15px;
  color: var(--nx-ink);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  transition: transform .4s var(--nx-ease-out), box-shadow .35s var(--nx-ease);
}
.nx-store-badge:hover { transform: translateY(-3px); box-shadow: var(--nx-shadow-m); }
.nx-store-badge svg { width: 24px; height: 24px; flex: 0 0 auto; }
.nx-store-badge span { display: grid; line-height: 1.2; }
.nx-store-badge small { color: var(--nx-muted); font-size: .66rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.nx-store-badge b { font-size: .95rem; font-weight: 800; }

/* --------------------------------------------------------------------------
   15b. Scheda persona (pagina fondatore)
   -------------------------------------------------------------------------- */
.nx-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 52px);
}
.nx-portrait {
  position: relative;
  width: clamp(160px, 20vw, 232px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 6px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--nx-green-bright), var(--nx-accent));
  box-shadow: var(--nx-shadow-l);
}
.nx-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--nx-surface-3);
}
.nx-portrait::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px dashed color-mix(in srgb, var(--nx-green) 34%, transparent);
  border-radius: 50%;
  animation: nx-spin 40s linear infinite;
}
.nx-profile-body { display: grid; gap: 16px; justify-items: start; }
.nx-profile-role {
  color: var(--nx-ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: 650;
  line-height: 1.55;
}
.nx-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--nx-muted);
  font-size: .87rem;
}
.nx-profile-meta span { display: inline-flex; align-items: center; gap: 7px; }
.nx-profile-meta svg { width: 15px; height: 15px; color: var(--nx-green); flex: 0 0 auto; }

/* elenco formazione */
.nx-edu { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nx-edu li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  transition: transform .4s var(--nx-ease-out), border-color .3s var(--nx-ease);
}
.nx-edu li:hover { transform: translateX(4px); border-color: var(--nx-green); }
.nx-edu i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--nx-green);
  background: var(--nx-mint-soft);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.nx-edu b { display: block; color: var(--nx-ink); font-size: 1.02rem; }
.nx-edu small { display: block; margin-top: 3px; color: var(--nx-muted); font-size: .87rem; line-height: 1.45; }
.nx-edu em {
  color: var(--nx-muted);
  font-size: .76rem;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .nx-profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .nx-profile-body { justify-items: center; }
  .nx-profile-meta { justify-content: center; }
  .nx-edu li { grid-template-columns: 46px minmax(0, 1fr); }
  .nx-edu em { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   16. Pagina investitori
   -------------------------------------------------------------------------- */
.nx-table-wrap {
  margin-top: 26px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  overflow-x: auto;
}
.nx-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .89rem; }
.nx-table th,
.nx-table td { padding: 14px 18px; text-align: left; vertical-align: top; }
.nx-table thead th {
  position: sticky;
  top: 0;
  color: var(--nx-ink);
  background: var(--nx-surface-3);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nx-table tbody tr + tr { border-top: 1px solid var(--nx-line); }
.nx-table tbody tr:hover { background: var(--nx-surface-2); }
.nx-table td { color: var(--nx-muted); line-height: 1.55; }
.nx-table td:first-child { color: var(--nx-ink); font-weight: 700; }

.nx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--nx-r-pill);
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}
.nx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nx-pill-live { color: #1c7a45; background: var(--nx-mint-soft); }
.nx-pill-ready { color: #9a6208; background: var(--nx-amber-soft); }
.nx-pill-build { color: #2f7fbf; background: var(--nx-sky-soft); }
.nx-pill-off { color: #6b7a71; background: var(--nx-surface-3); }
:root[data-theme="dark"] .nx-pill-live { color: var(--nx-green-bright); }
:root[data-theme="dark"] .nx-pill-ready { color: var(--nx-amber); }

.nx-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--nx-line);
  border-left: 4px solid var(--nx-amber);
  border-radius: var(--nx-r-m);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
}
.nx-note i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--nx-amber);
  background: var(--nx-amber-soft);
}
.nx-note i svg { width: 20px; height: 20px; }
.nx-note b { display: block; color: var(--nx-ink); margin-bottom: 5px; }
.nx-note p { font-size: .89rem; line-height: 1.58; }

.nx-timeline { display: grid; gap: 0; margin-top: 30px; }
.nx-timeline-item {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 0 0 30px 38px;
  border-left: 2px solid var(--nx-line);
}
.nx-timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.nx-timeline-item::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -9px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--nx-bg);
  border-radius: 50%;
  background: var(--nx-line-strong);
}
.nx-timeline-item.is-done::before { background: var(--nx-green-bright); }
.nx-timeline-item.is-now::before {
  background: var(--nx-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-accent) 26%, transparent);
}
.nx-timeline-item strong { color: var(--nx-ink); font-size: 1.02rem; }
.nx-timeline-item span { color: var(--nx-green); font-size: .74rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.nx-timeline-item p { font-size: .92rem; line-height: 1.58; }

/* --------------------------------------------------------------------------
   17. Animazioni di ingresso
   -------------------------------------------------------------------------- */
.nx-js .nx-rv {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .8s var(--nx-ease) var(--nx-d, 0ms),
    transform .9s var(--nx-ease-out) var(--nx-d, 0ms),
    filter .8s var(--nx-ease) var(--nx-d, 0ms);
  filter: blur(6px);
}
.nx-rv.is-in { opacity: 1; transform: none; filter: none; }

.nx-rv-left { transform: translateX(-26px); }
.nx-rv-right { transform: translateX(26px); }
.nx-rv-scale { transform: scale(.94); }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nx-hero-grid { grid-template-columns: 1fr; }
  .nx-hero-copy { justify-items: center; text-align: center; max-width: 720px; margin-inline: auto; }
  .nx-hero-proof { justify-content: center; }
  .nx-hero-cta { justify-content: center; }
  .nx-stage { min-height: 470px; margin-top: 12px; }
  .nx-consent { grid-template-columns: 1fr; }
  .nx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-footer-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 900px) {
  .nx-nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--nx-gutter);
    right: var(--nx-gutter);
    display: grid;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-r-l);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-l);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transform-origin: top center;
    transition: opacity .3s var(--nx-ease), transform .38s var(--nx-ease-out), visibility .3s;
  }
  .nx-nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nx-nav-links a { padding: 12px 15px; font-size: .96rem; }
  .nx-nav-links a.is-active::after { display: none; }
  .nx-burger { display: grid; }
  .nx-nav-inner { justify-content: space-between; }
  .nx-nav-actions .nx-btn-hide-sm { display: none; }
  .seo-landing .nx-nav-actions .nx-btn { display: none; }

  .nx-doors { grid-template-columns: 1fr; }
  .nx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-col-2, .nx-col-3, .nx-col-4, .nx-col-6 { grid-column: span 2; }
  .nx-flow { grid-template-columns: 1fr; gap: 26px; }
  .nx-flow::before { display: none; }
}

@media (max-width: 560px) {
  .nx-nav-actions .nx-btn { display: none; }
  .nx-bento { grid-template-columns: 1fr; }
  .nx-col-2, .nx-col-3, .nx-col-4, .nx-col-6 { grid-column: span 1; }
  .nx-footer-grid { grid-template-columns: 1fr; }
  .nx-float-a, .nx-float-b, .nx-float-c { display: none; }
  .nx-hero-cta .nx-btn { width: 100%; }
  .nx-card-shot { min-height: 340px; }
}

/* --------------------------------------------------------------------------
   19. Preferenze di movimento e stampa
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nx *,
  .nx *::before,
  .nx *::after,
  body.nx-page *,
  body.nx-page *::before,
  body.nx-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .nx-rv { opacity: 1; transform: none; filter: none; }
  .nx-phone { transform: none; }
}

@media print {
  .nx-nav, .nx-progress, .nx-aurora, .nx-grain-layer, .nx-cta-actions, .nx-burger { display: none !important; }
  .nx-rv { opacity: 1 !important; transform: none !important; filter: none !important; }
  .nx { color: #000; background: #fff; }
}

/* ==========================================================================
   20. Livello di compatibilita' per le pagine gia' esistenti
   --------------------------------------------------------------------------
   Le pagine di contenuto (guide, prezzi, chi siamo, risorse, contatti...)
   hanno markup e classi proprie in styles.css. Qui le stesse classi vengono
   riportate sui token nuovi, cosi' tutto il sito e' coerente senza dover
   riscrivere contenuti gia' indicizzati.
   ========================================================================== */
body.nx-page.nx { background: var(--nx-bg); color: var(--nx-ink); }
.nx .shell { min-height: 100vh; background: transparent; }

.nx .seo-main,
.nx .pricing-page,
.nx .contact-page,
.nx .checklist-page,
.nx .diary-template-page,
.nx .content-view {
  width: min(var(--nx-max), 100% - var(--nx-gutter) * 2);
  margin-inline: auto;
  padding-block: clamp(28px, 4vw, 52px) 0;
}

/* --- briciole di pane --- */
.nx .seo-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(22px, 3vw, 38px);
  color: var(--nx-muted);
  font-size: .82rem;
}
.nx .seo-breadcrumb a { color: var(--nx-green); font-weight: 650; }
.nx .seo-breadcrumb a:hover { text-decoration: underline; }

/* --- hero di contenuto --- */
.nx .seo-hero,
.nx .pricing-hero,
.nx .contact-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(26px, 4vw, 56px);
  padding-block: clamp(20px, 3vw, 44px) clamp(34px, 5vw, 64px);
}
.nx .seo-hero > div:first-child,
.nx .pricing-hero > div:first-child,
.nx .contact-hero > div:first-child { display: grid; gap: 16px; align-content: start; }

.nx .seo-hero h1,
.nx .pricing-hero h1,
.nx .contact-hero h1,
.nx .page-heading h1 {
  margin: 0;
  color: var(--nx-ink);
  font-size: clamp(2.2rem, 4.8vw, 3.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.nx .lead,
.nx .seo-hero p,
.nx .pricing-hero p,
.nx .contact-hero p,
.nx .page-heading p {
  color: var(--nx-ink-soft);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.62;
}
.nx .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nx-green);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.nx .eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }

.nx .seo-actions,
.nx .contact-actions,
.nx .checklist-actions,
.nx .button-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 8px; }

/* --- immagini di supporto --- */
.nx .seo-visual { margin: 0; display: grid; gap: 12px; }
.nx .seo-visual-frame,
.nx .pricing-hero figure {
  position: relative;
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-xl);
  background: linear-gradient(155deg, var(--nx-surface-3), var(--nx-surface));
  box-shadow: var(--nx-shadow-l);
  overflow: hidden;
}
.nx .seo-visual-frame img,
.nx .pricing-hero figure img { display: block; width: 100%; height: auto; border-radius: var(--nx-r-l); }
.nx .seo-visual figcaption { display: grid; gap: 4px; color: var(--nx-muted); font-size: .84rem; line-height: 1.5; }
.nx .seo-visual figcaption strong { color: var(--nx-ink); font-size: .92rem; }

/* --- elenco di prove sotto l'hero --- */
.nx .seo-proof {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(11px, 1.4vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx .seo-proof li {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  color: var(--nx-muted);
  font-size: .87rem;
  line-height: 1.5;
  transition: transform .4s var(--nx-ease-out), border-color .3s var(--nx-ease);
}
.nx .seo-proof li:hover { transform: translateY(-4px); border-color: var(--nx-green); }
.nx .seo-proof strong { display: block; margin-bottom: 5px; color: var(--nx-ink); font-size: .95rem; }

/* --- sezioni --- */
.nx .seo-section,
.nx .pricing-value-section,
.nx .pricing-faq { padding-block: clamp(38px, 5vw, 72px); }
.nx .seo-section-heading { display: grid; gap: 13px; max-width: 780px; margin-bottom: clamp(24px, 3vw, 38px); }
.nx .seo-section-heading h2,
.nx .pricing-faq h2,
.nx .pricing-value-section h2,
.nx .seo-faq h2 {
  margin: 0;
  color: var(--nx-ink);
  font-size: clamp(1.8rem, 3.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.nx .seo-section h3,
.nx .seo-card h3,
.nx .resource-card h3 {
  margin: 0 0 8px;
  color: var(--nx-ink);
  font-size: 1.18rem;
  font-weight: 780;
  letter-spacing: -.022em;
  line-height: 1.24;
}
.nx .seo-section p,
.nx .seo-card p,
.nx .resource-card p { color: var(--nx-muted); line-height: 1.62; }

/* --- griglie e card di contenuto --- */
.nx .seo-grid,
.nx .resource-grid,
.nx .contact-grid,
.nx .pricing-value-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: clamp(13px, 1.6vw, 20px);
}
.nx .seo-card,
.nx .resource-card,
.nx .contact-card,
.nx .pricing-value-points > * {
  padding: clamp(21px, 2.4vw, 28px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  transition: transform .45s var(--nx-ease-out), box-shadow .45s var(--nx-ease), border-color .35s var(--nx-ease);
}
.nx .seo-card:hover,
.nx .resource-card:hover,
.nx .contact-card:hover { transform: translateY(-5px); box-shadow: var(--nx-shadow-m); border-color: var(--nx-line-strong); }
.nx .seo-card-wide { grid-column: 1 / -1; }
.nx .resource-card-featured {
  color: #eaf6ec;
  background: linear-gradient(155deg, #123b26, #071711);
  border-color: rgba(255, 255, 255, .1);
}
.nx .resource-card-featured h3 { color: #fff; }
.nx .resource-card-featured p { color: rgba(233, 246, 236, .78); }
.nx .resource-card-featured a { color: var(--nx-mint); }

/* --- passi numerati --- */
.nx .seo-steps,
.nx .editorial-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(13px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  counter-reset: nxstep;
  list-style: none;
}
.nx .seo-steps li,
.nx .editorial-steps li {
  position: relative;
  padding: clamp(21px, 2.4vw, 28px);
  padding-top: 58px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  color: var(--nx-muted);
  line-height: 1.6;
}
.nx .seo-steps li::before,
.nx .editorial-steps li::before {
  counter-increment: nxstep;
  content: counter(nxstep, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: clamp(21px, 2.4vw, 28px);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(140deg, var(--nx-green-bright), #1b5c35);
  font-size: .72rem;
  font-weight: 850;
}
.nx .seo-steps strong,
.nx .editorial-steps strong { display: block; margin-bottom: 6px; color: var(--nx-ink); font-size: 1.02rem; }

/* --- domande frequenti --- */
.nx .seo-faq details,
.nx .pricing-faq details {
  margin-top: 10px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  overflow: hidden;
}
.nx .seo-faq summary,
.nx .pricing-faq summary {
  padding: 18px clamp(18px, 2vw, 25px);
  color: var(--nx-ink);
  font-size: 1rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.nx .seo-faq summary::-webkit-details-marker,
.nx .pricing-faq summary::-webkit-details-marker { display: none; }
.nx .seo-faq details[open] summary,
.nx .pricing-faq details[open] summary { color: var(--nx-green); }
.nx .seo-faq details > *:not(summary),
.nx .pricing-faq details > *:not(summary) { padding: 0 clamp(18px, 2vw, 25px) 20px; color: var(--nx-muted); line-height: 1.62; }

/* --- riquadro nota --- */
.nx .seo-note,
.nx .pricing-disclaimer,
.nx .content-provenance,
.nx .checklist-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--nx-line);
  border-left: 4px solid var(--nx-amber);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  color: var(--nx-muted);
  line-height: 1.62;
}
.nx .seo-note h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

/* --- collegamenti correlati --- */
.nx .seo-related { display: flex; flex-wrap: wrap; gap: 10px; }
.nx .seo-related a {
  padding: 11px 19px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-pill);
  color: var(--nx-ink);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  font-size: .88rem;
  font-weight: 700;
  transition: transform .35s var(--nx-ease-out), border-color .3s var(--nx-ease), color .3s var(--nx-ease);
}
.nx .seo-related a:hover { transform: translateY(-3px); border-color: var(--nx-green); color: var(--nx-green); }

/* --- bottoni delle pagine esistenti --- */
.nx .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--nx-r-pill);
  font-family: inherit;
  font-size: .93rem;
  font-weight: 750;
  transition: transform .35s var(--nx-ease-out), box-shadow .3s var(--nx-ease), background .25s var(--nx-ease);
}
.nx .button:hover:not(:disabled) { transform: translateY(-2px); }
.nx .button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--nx-accent) 0%, #ff7d4c 52%, #ff4d16 100%);
  box-shadow: 0 12px 28px -12px rgba(255, 90, 39, .8);
}
.nx .button.secondary {
  color: var(--nx-ink);
  background: var(--nx-surface);
  border-color: var(--nx-line);
  box-shadow: var(--nx-shadow-s);
}
.nx .button.ghost { color: var(--nx-ink-soft); background: transparent; border-color: var(--nx-line); }
.nx .button.premium-button { background: linear-gradient(135deg, var(--nx-violet), #8b4ec1); color: #fff; }

/* --- prezzi del portale --- */
.nx .public-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  align-items: stretch;
}
.nx .public-price-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: clamp(24px, 2.8vw, 32px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-xl);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-s);
  transition: transform .45s var(--nx-ease-out), box-shadow .45s var(--nx-ease);
}
.nx .public-price-card:hover { transform: translateY(-6px); box-shadow: var(--nx-shadow-m); }
.nx .public-price-card.featured {
  border: 2px solid transparent;
  box-shadow: var(--nx-shadow-l);
  background:
    linear-gradient(var(--nx-surface), var(--nx-surface)) padding-box,
    linear-gradient(150deg, var(--nx-green-bright), var(--nx-accent)) border-box;
}
.nx .price-kicker { color: var(--nx-green); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.nx .public-price-card h2 { margin: 6px 0; color: var(--nx-ink); font-size: 1.3rem; letter-spacing: -.02em; }
.nx .public-price { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 0; }
.nx .public-price strong { color: var(--nx-ink); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 850; letter-spacing: -.05em; }
.nx .public-price span { color: var(--nx-muted); font-size: .88rem; font-weight: 650; }
.nx .price-description { color: var(--nx-muted); font-size: .89rem; line-height: 1.55; }
.nx .price-saving,
.nx .best-value { color: var(--nx-green); font-size: .8rem; font-weight: 780; }
.nx .price-feature-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.nx .price-feature-list li {
  position: relative;
  padding-left: 25px;
  color: var(--nx-ink-soft);
  font-size: .89rem;
  line-height: 1.5;
}
.nx .price-feature-list li::before {
  content: "";
  position: absolute;
  top: .42em;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nx-mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d4a' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

/* --- contatti --- */
.nx .contact-email,
.nx .primary-contact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--nx-green);
  font-weight: 780;
  word-break: break-word;
}
.nx .contact-label { color: var(--nx-muted); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

/* --- moduli (checklist, modello diario, form venditori) --- */
.nx .checklist-form,
.nx .diary-template-form,
.nx .form-panel,
.nx .panel,
.nx .center-card,
.nx .checklist-progress-card {
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-xl);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-m);
}
.nx .checklist-progress-track { background: var(--nx-surface-3); }
.nx input, .nx select, .nx textarea {
  border-color: var(--nx-line-strong);
  border-radius: var(--nx-r-s);
  color: var(--nx-ink);
  background: var(--nx-surface);
}
.nx input:focus, .nx select:focus, .nx textarea:focus {
  border-color: var(--nx-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-green) 18%, transparent);
}
.nx label { color: var(--nx-ink); }
.nx label span { color: var(--nx-muted); }

@media (max-width: 900px) {
  .nx .seo-hero,
  .nx .pricing-hero,
  .nx .contact-hero { grid-template-columns: 1fr; }
}

/* --- correzioni sui blocchi scuri e sui badge delle pagine esistenti --- */
.nx .pricing-value-section {
  color: #eaf6ec;
  background: linear-gradient(150deg, #14432b, #071711);
  border-radius: var(--nx-r-xl);
  box-shadow: var(--nx-shadow-l);
}
.nx .pricing-value-section h2 { color: #fff; }
.nx .pricing-value-section p,
.nx .pricing-value-section span { color: rgba(233, 246, 236, .8); }
.nx .pricing-value-section .eyebrow { color: var(--nx-mint); }
.nx .pricing-value-points > * {
  color: rgba(233, 246, 236, .82);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: none;
}
.nx .pricing-value-points > *:hover { transform: none; border-color: rgba(255, 255, 255, .26); }

.nx .best-value {
  position: absolute;
  top: -13px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: var(--nx-r-pill);
  color: #fff;
  background: linear-gradient(135deg, var(--nx-green-bright), #1b5c35);
  box-shadow: var(--nx-shadow-s);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nx .pricing-disclaimer {
  display: block;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  font-size: .84rem;
  border-left-width: 1px;
  border-left-color: var(--nx-line);
  border-top: 3px solid var(--nx-amber);
}

/* --- superfici ereditate da styles.css riportate sui token del tema -------
   Queste regole hanno colori fissi chiari nel foglio del portale: senza
   override il tema scuro produce testo chiaro su fondo bianco. */
.nx .seo-hero {
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-xl);
  background: linear-gradient(150deg, var(--nx-surface) 0%, var(--nx-surface-3) 100%);
  box-shadow: var(--nx-shadow-l);
}
.nx .seo-hero .lead { max-width: 68ch; color: var(--nx-ink-soft); }

.nx .seo-proof {
  padding: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  box-shadow: none;
  margin-top: clamp(20px, 3vw, 32px);
}
.nx .seo-hero-media > .seo-proof { gap: clamp(11px, 1.4vw, 16px); overflow: visible; }
.nx .seo-proof li,
.nx .seo-hero-media > .seo-proof li {
  padding: 18px 20px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  color: var(--nx-muted);
  background: var(--nx-surface);
}

.nx .seo-visual-bite .seo-visual-frame,
.nx .bite-feature-gallery figure {
  border-color: var(--nx-line);
  background: linear-gradient(150deg, var(--nx-surface-3), var(--nx-surface));
  box-shadow: var(--nx-shadow-m);
}
.nx .bite-feature-gallery { gap: clamp(13px, 1.6vw, 20px); }
.nx .bite-feature-gallery img { background: var(--nx-surface-3); }
.nx .bite-feature-gallery figcaption { color: var(--nx-muted); }
.nx .bite-feature-gallery figcaption strong { color: var(--nx-ink); }
.nx .bite-feature-gallery .real-app-card {
  background: linear-gradient(150deg, #1c4e34, #0a1a13);
  border-color: rgba(255, 255, 255, .1);
}
.nx .bite-feature-gallery .real-app-card figcaption,
.nx .bite-feature-gallery .real-app-card figcaption strong { color: #fff; }
.nx .bite-feature-gallery .real-app-card figcaption span { color: rgba(233, 246, 236, .78); }

/* pannelli scuri gia' presenti nelle pagine di contenuto */
.nx .seo-card-dark,
.nx .workflow-section,
.nx .final-cta {
  color: #eaf6ec;
  background: linear-gradient(150deg, #14432b, #071711);
  border-color: rgba(255, 255, 255, .1);
}
.nx .workflow-section h2,
.nx .workflow-section h3,
.nx .final-cta h2 { color: #fff; }
.nx .workflow-section p,
.nx .final-cta p { color: rgba(233, 246, 236, .8); }

/* riquadri informativi con fondo chiaro fisso */
.nx .content-provenance,
.nx .checklist-intro,
.nx .seo-note { color: var(--nx-muted); background: var(--nx-surface); }
.nx .seo-note h2,
.nx .seo-note strong,
.nx .content-provenance strong { color: var(--nx-ink); }
.nx .seo-note a,
.nx .content-provenance a { color: var(--nx-green); font-weight: 700; }

/* tabelle e blocchi di testo generici delle guide */
.nx table { border-color: var(--nx-line); color: var(--nx-ink); }
.nx th { background: var(--nx-surface-3); color: var(--nx-ink); }
.nx td { color: var(--nx-muted); border-color: var(--nx-line); }
.nx blockquote { border-left: 4px solid var(--nx-green); color: var(--nx-ink-soft); }
.nx hr { border: 0; border-top: 1px solid var(--nx-line); }
.nx strong { color: var(--nx-ink); }
.nx a:not(.button):not(.nx-btn):not(.nx-logo):not(.nx-store-badge):not(.nx-footer-col a) { color: var(--nx-green); }

.nx .seo-visual figcaption {
  border-color: var(--nx-line);
  color: var(--nx-ink);
  background: color-mix(in srgb, var(--nx-surface) 93%, transparent);
  box-shadow: var(--nx-shadow-m);
}
.nx .seo-visual figcaption strong { color: var(--nx-ink); }
.nx .seo-visual figcaption span { color: var(--nx-muted); }

/* --- pagine legali -------------------------------------------------------
   Sono le pagine linkate dal footer di tutto il sito: se restano col vecchio
   aspetto, chi clicca "Privacy" pensa di essere finito altrove. */
.nx .legal-page {
  width: min(880px, 100% - var(--nx-gutter) * 2);
  margin-inline: auto;
  padding-block: clamp(28px, 4vw, 56px) 0;
}
.nx .legal-card {
  padding: clamp(26px, 4vw, 56px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-xl);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-l);
}
.nx .legal-card h1 {
  margin: 12px 0 18px;
  color: var(--nx-ink);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.nx .legal-card h2 {
  margin: clamp(30px, 4vw, 44px) 0 12px;
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--nx-line);
  color: var(--nx-ink);
  font-size: clamp(1.14rem, 1.9vw, 1.42rem);
  font-weight: 780;
  letter-spacing: -.022em;
  line-height: 1.25;
}
.nx .legal-card h2:first-of-type { border-top: 0; padding-top: 0; }
.nx .legal-card h3 { margin: 22px 0 8px; color: var(--nx-ink); font-size: 1.04rem; font-weight: 750; }
.nx .legal-card p,
.nx .legal-card li { color: var(--nx-ink-soft); line-height: 1.72; }
.nx .legal-card p { margin: 0 0 14px; }
.nx .legal-card ul,
.nx .legal-card ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.nx .legal-card strong { color: var(--nx-ink); }
.nx .legal-card a { color: var(--nx-green); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

.nx .legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: clamp(22px, 3vw, 32px);
  padding-bottom: clamp(20px, 2.6vw, 28px);
  border-bottom: 1px solid var(--nx-line);
  color: var(--nx-muted);
  font-size: .85rem;
}
.nx .legal-meta strong { color: var(--nx-ink); font-weight: 750; }

.nx .legal-notice {
  display: grid;
  gap: 8px;
  margin: 24px 0;
  padding: 20px 22px;
  border: 1px solid var(--nx-line);
  border-left: 4px solid var(--nx-amber);
  border-radius: var(--nx-r-m);
  background: var(--nx-surface-2);
  color: var(--nx-muted);
  font-size: .92rem;
  line-height: 1.65;
}
.nx .legal-notice strong { color: var(--nx-ink); }

.nx .legal-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: clamp(28px, 4vw, 40px); }

/* sommario delle sezioni, generato da nutrimi.js */
.nx-toc {
  display: grid;
  gap: 9px;
  margin: 0 0 clamp(24px, 3vw, 34px);
  padding: 20px 22px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface-2);
}
.nx-toc b { color: var(--nx-ink); font-size: .74rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.nx-toc ol { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.nx-toc a { color: var(--nx-ink-soft); font-size: .89rem; text-decoration: none; }
.nx-toc a:hover { color: var(--nx-green); text-decoration: underline; }

@media print {
  .nx .legal-card { border: 0; box-shadow: none; padding: 0; }
  .nx-toc, .nx .legal-actions { display: none !important; }
}

/* ==========================================================================
   21. Rifiniture sulle pagine di contenuto
   --------------------------------------------------------------------------
   Il livello di compatibilita' le rendeva coerenti nei colori ma non nelle
   proporzioni: illustrazioni enormi, card di altezze diverse, spazi morti.
   ========================================================================== */

/* Le illustrazioni della mascotte erano quadrate a piena colonna: circa 550 px
   di altezza ciascuna, che spingevano il contenuto reale sotto la piega. */
.nx .bite-feature-gallery figure { display: grid; grid-template-rows: auto 1fr; }
.nx .bite-feature-gallery img {
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  object-position: center 32%;
}
.nx .bite-feature-gallery .real-app-card img {
  aspect-ratio: auto;
  max-height: 300px;
  object-fit: contain;
  object-position: center top;
}
.nx .bite-feature-gallery figcaption { align-content: start; }

/* Ritratto nell'hero delle pagine di contenuto: la foto di una persona non va
   in una cornice 16/11 come uno screenshot. */
.nx .seo-visual-person { justify-items: center; text-align: center; gap: 18px; }
.nx .seo-visual-person .nx-portrait { width: clamp(180px, 22vw, 260px); }
.nx .seo-visual-person figcaption {
  position: static;
  max-width: 34ch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nx .seo-visual-person figcaption strong { font-size: 1.06rem; }
.nx .seo-visual-person figcaption span { font-size: .87rem; }

/* Le griglie di card avevano altezze ragguagliate dalla riga ma contenuto in
   alto: il risultato erano buchi sotto le card piu' corte. */
.nx .seo-grid,
.nx .resource-grid,
.nx .contact-grid { align-items: stretch; }
.nx .seo-card,
.nx .resource-card,
.nx .contact-card {
  display: grid;
  align-content: center;
  gap: 4px;
}
.nx .seo-card > :last-child,
.nx .resource-card > :last-child { margin-bottom: 0; }

/* Elenco numerato dei passaggi: stessa altezza e numeri allineati. */
.nx .seo-steps li,
.nx .editorial-steps li { display: grid; align-content: center; }

/* Spazio fra sezioni consecutive: i due padding si sommavano. */
.nx .seo-section { padding-block: clamp(34px, 4.2vw, 60px); }
.nx .seo-section + .seo-section { padding-top: 0; }
.nx .seo-section-heading { margin-bottom: clamp(20px, 2.4vw, 30px); }

/* Blocco finale dei link correlati: senza respiro sopra sembrava attaccato. */
.nx .seo-related { padding-top: clamp(8px, 1.4vw, 16px); }

/* Le liste di prove sotto l'hero su schermi larghi restavano su una riga sola
   troppo stretta: meglio due righe leggibili che quattro colonne compresse. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nx .seo-hero-media > .seo-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   22. Visualizzatore a schermo pieno per le schermate
   --------------------------------------------------------------------------
   Nelle card i telefoni sono larghi 150-190 px: il testo dell'app si intuisce
   ma non si legge. Al tocco la schermata si apre a tutta altezza, caricando
   dove disponibile una versione a 760 px invece di quella da 440.
   ========================================================================== */
.nx-card-shot-window img,
.nx .bite-feature-gallery img,
.nx .seo-visual-frame img { cursor: zoom-in; }

/* pallino con la lente, per far capire che l'immagine si apre */
.nx-card-shot-window,
.nx .bite-feature-gallery figure,
.nx .seo-visual-frame { position: relative; }
.nx-card-shot-window::before,
.nx .bite-feature-gallery figure::before,
.nx .seo-visual-frame::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 26, 19, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 17px no-repeat;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s var(--nx-ease), transform .35s var(--nx-spring);
  pointer-events: none;
}
.nx-card-shot:hover .nx-card-shot-window::before,
.nx-card-shot-window:focus-within::before,
.nx .bite-feature-gallery figure:hover::before,
.nx .bite-feature-gallery figure:focus-within::before,
.nx .seo-visual-frame:hover::before,
.nx .seo-visual-frame:focus-within::before { opacity: 1; transform: none; }
@media (hover: none) {
  .nx-card-shot-window::before,
.nx .bite-feature-gallery figure::before,
.nx .seo-visual-frame::before { opacity: .9; transform: none; }
}

/* --- sovrapposizione --- */
.nx-lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: clamp(12px, 2vw, 24px);
  background: rgba(4, 12, 8, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--nx-ease), visibility .3s;
}
.nx-lb.is-open { opacity: 1; visibility: visible; }
body.nx-lb-open { overflow: hidden; }

.nx-lb-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nx-lb-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: #eaf6ec;
  background: rgba(255, 255, 255, .09);
  cursor: pointer;
  transition: background .25s var(--nx-ease), transform .3s var(--nx-spring), opacity .2s;
}
.nx-lb-btn:hover { background: rgba(255, 255, 255, .2); transform: scale(1.07); }
.nx-lb-btn svg { width: 19px; height: 19px; }
.nx-lb-btn[hidden] { display: none; }

.nx-lb-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 22px);
  min-height: 0;
}
.nx-lb-figure {
  grid-column: 2;
  display: grid;
  place-items: center;
  min-height: 0;
  margin: 0;
}
.nx-lb-frame {
  padding: 9px;
  border-radius: 30px;
  background: linear-gradient(155deg, #35503f, #08150f 62%, #22392c);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .13);
  transform: scale(.94);
  transition: transform .4s var(--nx-ease-out);
}
.nx-lb.is-open .nx-lb-frame { transform: none; }
.nx-lb-frame img {
  display: block;
  max-height: calc(100vh - 190px);
  max-width: min(440px, calc(100vw - 120px));
  width: auto;
  height: auto;
  border-radius: 23px;
  background: var(--nx-surface-3);
}

.nx-lb-caption {
  max-width: 62ch;
  margin: 0 auto;
  color: rgba(233, 246, 236, .78);
  text-align: center;
  font-size: .89rem;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .nx-lb-stage { grid-template-columns: minmax(0, 1fr); }
  .nx-lb-figure { grid-column: 1; }
  .nx-lb-stage .nx-lb-btn { position: absolute; top: 50%; margin-top: -21px; z-index: 2; }
  .nx-lb-stage .nx-lb-prev { left: 0; }
  .nx-lb-stage .nx-lb-next { right: 0; }
  .nx-lb-frame img { max-width: calc(100vw - 40px); max-height: calc(100vh - 170px); }
}

@media (prefers-reduced-motion: reduce) {
  .nx-lb, .nx-lb-frame { transition: none; }
}

/* Il pallino della lente va sull'immagine, non sulla didascalia sotto. */
.nx .bite-feature-gallery figure::before { top: 12px; right: 12px; bottom: auto; }
.nx .seo-visual-frame::before { top: 14px; right: 14px; bottom: auto; }

/* Nel visualizzatore le illustrazioni quadrate non devono essere costrette
   nella cornice verticale di un telefono. */
.nx-lb-frame.is-wide { border-radius: 24px; padding: 12px; }
.nx-lb-frame.is-wide img { border-radius: 16px; max-width: min(900px, calc(100vw - 80px)); }

/* ==========================================================================
   23. Apertura del portale
   --------------------------------------------------------------------------
   Prima era uno spinner grigio con la scritta "Caricamento del portale": la
   prima cosa che vedeva un professionista appena arrivato sul sito.
   ========================================================================== */
.nx-boot {
  display: grid;
  place-items: center;
  min-height: min(78vh, 720px);
  padding: clamp(24px, 5vw, 60px);
  background:
    radial-gradient(58% 46% at 50% 22%, color-mix(in srgb, var(--nx-mint) 42%, transparent), transparent 68%),
    var(--nx-bg);
}
.nx-boot-inner {
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 420px;
  text-align: center;
}
.nx-boot-inner img {
  width: clamp(180px, 30vw, 260px);
  height: auto;
  margin-bottom: 10px;
  border-radius: 28px;
  animation: nx-boot-float 4.5s var(--nx-ease) infinite alternate;
}
@keyframes nx-boot-float { to { transform: translateY(-10px); } }

.nx-boot-title {
  color: var(--nx-ink);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
}
.nx-boot-sub { color: var(--nx-muted); font-size: .93rem; }

/* barra indeterminata: dice "sto lavorando" senza fingere una percentuale */
.nx-boot-bar {
  position: relative;
  width: min(240px, 70%);
  height: 4px;
  margin-top: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nx-line-strong) 70%, transparent);
  overflow: hidden;
}
.nx-boot-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nx-green-bright), var(--nx-accent));
  animation: nx-boot-slide 1.5s var(--nx-ease) infinite;
}
@keyframes nx-boot-slide {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(240%); }
}

@media (prefers-reduced-motion: reduce) {
  .nx-boot-inner img { animation: none; }
  .nx-boot-bar i { animation: none; width: 100%; }
}

/* Con quattro schermate affiancate lo stack ha bisogno di piu' spazio della
   colonna del testo, altrimenti i telefoni scendono sotto i 100 px. */
.nx-card-langs:has(.nx-lang-stack figure:nth-child(4)) {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.nx-card-langs:has(.nx-lang-stack figure:nth-child(4)) .nx-card-shot-window {
  width: clamp(96px, 10.5vw, 132px);
}
@media (max-width: 1080px) {
  .nx-card-langs:has(.nx-lang-stack figure:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx-card-langs:has(.nx-lang-stack figure:nth-child(4)) .nx-card-shot-window {
    width: clamp(92px, 21vw, 130px);
  }
}

/* Mascotte contestuali nelle pagine operative e nei documenti. */
.nx .nx-panel-mascot {
  display: block;
  width: min(180px, 48%);
  max-height: 180px;
  margin: 0 0 4px auto;
  padding: 8px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: var(--nx-surface-3);
  object-fit: contain;
  box-shadow: var(--nx-shadow-s);
}

.nx .checklist-mascot {
  display: block;
  width: min(190px, 72%);
  max-height: 150px;
  margin: 0 auto 18px;
  object-fit: contain;
}

.nx .legal-mascot {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 26px);
  margin: 0 0 26px;
  padding: 16px clamp(18px, 3vw, 26px);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-l);
  background: linear-gradient(145deg, var(--nx-surface-3), var(--nx-surface-2));
}

.nx .legal-mascot img {
  display: block;
  width: 116px;
  height: 116px;
  object-fit: contain;
}

.nx .legal-mascot figcaption {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--nx-muted);
  line-height: 1.58;
}

.nx .legal-mascot figcaption strong {
  color: var(--nx-ink);
  font-size: 1rem;
}

@media (max-width: 620px) {
  .nx .nx-panel-mascot { width: min(150px, 46%); max-height: 150px; }
  .nx .legal-mascot { grid-template-columns: 82px minmax(0, 1fr); padding: 14px; }
  .nx .legal-mascot img { width: 82px; height: 82px; }
  .nx .legal-mascot figcaption { font-size: .88rem; }
}

@media print {
  .nx .checklist-mascot,
  .nx .legal-mascot { display: none !important; }
}

/* Catalogo pubblico delle fonti cliniche e bibliografiche. */
.source-hero .lead {
  max-width: 760px;
}

.source-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 auto 30px;
}

.source-metrics article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--nx-line, #d9e4dc);
  border-radius: 20px;
  background: var(--nx-surface, #fff);
  box-shadow: 0 10px 28px rgb(20 59 41 / 8%);
}

.source-metrics strong {
  color: var(--nx-ink, #123526);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.source-metrics span,
.source-domain,
.source-summary {
  color: var(--nx-muted, #5d6f65);
}

.source-filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 14px;
  margin: 24px 0 16px;
  padding: 18px;
  border: 1px solid var(--nx-line, #d9e4dc);
  border-radius: 18px;
  background: var(--nx-soft, #f4f8f4);
}

.source-filters label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--nx-ink, #123526);
  font-weight: 750;
}

.source-filters input,
.source-filters select {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--nx-line-strong, #b9cabf);
  border-radius: 12px;
  background: var(--nx-surface, #fff);
  color: var(--nx-ink, #123526);
  font: inherit;
}

.source-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.source-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--nx-line, #d9e4dc);
  border-radius: 18px;
  background: var(--nx-surface, #fff);
}

.source-card h2 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.source-domain {
  margin: 0 0 13px;
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.source-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.source-badges span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e8f3eb;
  color: #235a3c;
  font-size: .76rem;
  font-weight: 750;
}

.source-badges .source-badge-warning {
  background: #fff0db;
  color: #7a4615;
}

.source-link {
  margin-top: auto;
  font-weight: 800;
}

.source-error {
  padding: 16px;
  border: 1px solid #d29a4a;
  border-radius: 14px;
  background: #fff6e7;
  color: #6e3d11;
}

@media (max-width: 720px) {
  .source-metrics,
  .source-results,
  .source-filters {
    grid-template-columns: 1fr;
  }

  .source-metrics {
    gap: 10px;
  }

  .source-metrics article,
  .source-card {
    padding: 17px;
  }
}