:root {
  --nt-display: 'Plus Jakarta Sans', 'Sora', sans-serif;
  --nt-grad: linear-gradient(100deg, #2BB7E8, #3F66C9 55%, #7E4FA8);
  --nt-grad-border: linear-gradient(120deg, #2BB7E8, #3F66C9 55%, #7E4FA8);
  --nt-shine: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 60%);
  --nt-ink: #1B2A4A;
  --nt-body: #3D4C68;
  --nt-muted: #66748E;
  --nt-faint: #8A96AC;
  --nt-blue: #3F66C9;
  --nt-purple: #7E4FA8;
  --nt-bg: #FAFBFD;
  --nt-dark: #14203A;
}

/* ---- Base (scoped to our wrapper so parent theme pages are untouched) ---- */
/* Subtle branded first-paint reveal — same easing as the scroll-triggered
   .rise animations elsewhere, just a smaller/faster motion since it's the
   whole page rather than one card. */
body.neotab-page { margin: 0; font-family: 'Manrope', 'Segoe UI', sans-serif; background: var(--nt-bg); color: var(--nt-body); -webkit-font-smoothing: antialiased; animation: ntPageFade 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
body.neotab-page a { color: var(--nt-blue); }
body.neotab-page img { max-width: 100%; height: auto; }
.neotab-page a:focus-visible, .neotab-page button:focus-visible, .neotab-page input:focus-visible, .neotab-page select:focus-visible, .neotab-page textarea:focus-visible { outline: 3px solid #2BB7E8; outline-offset: 2px; }
.neotab-page input[type=range] { accent-color: var(--nt-blue); }
.neotab-page ::selection { background: #D6ECFB; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

@keyframes ntPulse { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@keyframes ntRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ntPageFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Typography ---- */
.nt-wrap, .wrap { max-width: 1160px; margin: 0 auto; }
.eyebrow { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nt-blue); }
.grad-text { background: var(--nt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-h2 { margin: 0 0 14px; font-family: var(--nt-display); font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--nt-ink); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.section-lead { margin: 0 0 40px; font-size: 17.5px; line-height: 1.6; max-width: 42em; text-wrap: pretty; }
.section { padding: clamp(40px, 6vw, 72px) 20px; }
.section-alt { background: #F2F6FB; }

/* ---- Buttons ---- */
.btn-primary {
  display: inline-block; text-decoration: none; text-align: center; border: none; cursor: pointer;
  color: #FFFFFF; font-family: inherit; font-weight: 800; font-size: 17px; padding: 15px 26px; border-radius: 14px;
  background-image: var(--nt-shine), var(--nt-grad);
  background-size: 240% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
  box-shadow: 0 6px 20px rgba(63,102,201,0.4);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-position 0.55s ease;
}
.btn-primary:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(63,102,201,0.5); background-position: -70% 0, 0 0; }
.btn-primary:active { transform: translateY(0) scale(0.97); }

/* Ninja Forms submit button (Contatti form): match .btn-primary exactly. */
.nt-ninja-form-card input[type="submit"], .nt-ninja-form-card button[type="submit"] {
  display: block !important; width: 100% !important; box-sizing: border-box; text-decoration: none; text-align: center; border: none; cursor: pointer;
  color: #FFFFFF !important; font-family: inherit; font-weight: 800; font-size: 17px; padding: 15px 26px; border-radius: 14px;
  background-image: var(--nt-shine), var(--nt-grad);
  background-size: 240% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
  box-shadow: 0 6px 20px rgba(63,102,201,0.4);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-position 0.55s ease;
}
.nt-ninja-form-card input[type="submit"]:hover, .nt-ninja-form-card button[type="submit"]:hover {
  color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(63,102,201,0.5); background-position: -70% 0, 0 0;
}
.nt-ninja-form-card input[type="submit"]:active, .nt-ninja-form-card button[type="submit"]:active {
  transform: translateY(0) scale(0.97);
}
/* All fields are required now; hide the "required" note and the red asterisks. */
.nt-ninja-form-card .nf-form-fields-required { display: none !important; }
.nt-ninja-form-card .ninja-forms-req-symbol { display: none !important; }

/* Field-level validation errors: show next to the label instead of below the input.
   The label and the error markup sit two DOM levels apart (nf-field / nf-after-field),
   so "display: contents" on the wrapper layers flattens them into one grid. */
.nt-ninja-form-card .nf-field-container:not(.submit-container) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: start;
}
.nt-ninja-form-card .nf-field-container:not(.submit-container) > .nf-before-field,
.nt-ninja-form-card .nf-field-container:not(.submit-container) > .nf-field,
.nt-ninja-form-card .nf-field-container:not(.submit-container) > .nf-after-field,
.nt-ninja-form-card .nf-field-container:not(.submit-container) nf-section,
.nt-ninja-form-card .nf-field-container:not(.submit-container) .field-wrap {
  display: contents;
}
.nt-ninja-form-card .nf-field-container:not(.submit-container) .nf-field-label {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 6px;
}
.nt-ninja-form-card .nf-field-container:not(.submit-container) .nf-field-element {
  grid-column: 1 / -1;
  grid-row: 2;
}
.nt-ninja-form-card .nf-field-container:not(.submit-container) .nf-input-limit {
  display: none;
}
.nt-ninja-form-card .nf-field-container:not(.submit-container) .nf-error-wrap {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  text-align: left;
}
.nt-ninja-form-card .nf-field-container:not(.submit-container) .nf-error-msg {
  position: static !important;
  font-size: 12.5px;
  font-weight: 700;
  color: #D64545;
}

/* Form-level "correct the errors" banner: centered above the submit button.
   main.js relocates the .nf-form-errors node to sit right before the submit
   field (Ninja Forms otherwise renders it after every field, including Invia). */
.nt-ninja-form-card .nf-form-errors { text-align: center; margin: 0 0 16px; }
.nt-ninja-form-card .nf-form-errors .nf-error-msg { font-size: 13.5px; font-weight: 700; color: #D64545; }
.btn-secondary {
  display: inline-block; text-decoration: none; color: var(--nt-blue); font-weight: 800; font-size: 17px; padding: 15px 22px; border-radius: 14px;
  border: 2px solid #C7D6EF; background-color: #FFFFFF;
  background-image: linear-gradient(115deg, rgba(63,102,201,0) 42%, rgba(63,102,201,0.1) 50%, rgba(63,102,201,0) 58%);
  background-size: 240% 100%; background-position: 130% 0; background-repeat: no-repeat;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-position 0.55s ease;
}
.btn-secondary:hover { color: var(--nt-blue); transform: translateY(-2px); border-color: var(--nt-blue); box-shadow: 0 8px 20px rgba(27,42,74,0.1); background-position: -70% 0; }
.btn-secondary:active { transform: translateY(0) scale(0.97); }
.btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  color: #FFFFFF; font-weight: 800; font-size: 18px; padding: 18px 24px; border-radius: 16px;
  background-color: #1FAF54; background-image: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 60%);
  background-size: 240% 100%; background-position: 130% 0; background-repeat: no-repeat;
  box-shadow: 0 6px 18px rgba(31,175,84,0.3);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, background-position 0.55s ease;
}
.btn-wa:hover { background-color: #189347; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31,175,84,0.4); background-position: -70% 0; }
.btn-wa:active { color: #FFFFFF; transform: translateY(0) scale(0.98); }
.link-arrow { text-decoration: none; font-weight: 800; font-size: 15.5px; color: var(--nt-blue); align-self: flex-start; display: inline-block; transition: transform 0.25s ease, color 0.2s ease; }
.link-arrow:hover { transform: translateX(4px); color: var(--nt-purple); }
/* All filled buttons: white text (override any parent-theme link colour). */
.neotab-page .btn-primary, .neotab-page .btn-primary:hover, .neotab-page .btn-primary:active, .neotab-page .btn-primary:focus,
.neotab-page .nt-cta, .neotab-page .nt-cta:hover, .neotab-page .nt-cta:focus,
.neotab-page .btn-wa, .neotab-page .btn-wa *, .neotab-page .btn-wa:hover, .neotab-page .btn-wa:active, .neotab-page .btn-wa:focus,
.neotab-page .wa-float, .neotab-page .wa-float *, .neotab-page .wa-float:hover, .neotab-page .wa-float:active, .neotab-page .wa-float:focus { color: #FFFFFF !important; }

/* ---- Gradient-border cards ---- */
.g-card {
  border: 1.5px solid transparent;
  background-image: linear-gradient(#FFFFFF, #FFFFFF), var(--nt-grad-border);
  background-origin: border-box; background-clip: padding-box, border-box;
  border-radius: 20px; overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.g-card:hover { box-shadow: 0 20px 48px rgba(27,42,74,0.11); }
.g-card-sm { border-radius: 16px; }
.g-card-sm:hover { box-shadow: 0 14px 34px rgba(27,42,74,0.1); }
.g-divider { height: 1.5px; background: var(--nt-grad); flex: none; }

/* ---- Top bar (all text + icons white) ---- */
.nt-topbar { background: var(--nt-dark); color: #FFFFFF; font-size: 13px; }
.nt-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 7px 20px; flex-wrap: wrap; }
.nt-tagline { margin: 0; font-weight: 700; color: #FFFFFF; letter-spacing: 0.01em; }
.nt-tagline strong { color: #FFFFFF; }
.nt-tagline .tagline-short { display: none; }
.nt-topbar-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nt-topbar-links a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 700; opacity: 0.92; transition: opacity 0.2s ease; }
.nt-topbar-links a:hover { opacity: 1; }
.nt-topbar-links svg { width: 16px; height: 16px; flex: none; display: block; }
/* Force everything in the top bar white (defeat parent-theme link colour). */
.neotab-page .nt-topbar, .neotab-page .nt-topbar a, .neotab-page .nt-topbar a:hover, .neotab-page .nt-topbar .lbl, .neotab-page .nt-topbar .nt-tagline, .neotab-page .nt-topbar svg { color: #FFFFFF !important; }
@media (max-width: 720px) {
  /* Keep the tagline and the 3 contact icons on one row (space-between on
     .nt-topbar-inner already pushes them to opposite ends) instead of
     forcing the tagline to its own full-width row above the icons. */
  .nt-tagline { flex: 1 1 auto; font-size: 12px; min-width: 0; }
  .nt-tagline .tagline-full { display: none; }
  .nt-tagline .tagline-short { display: inline; }
  .nt-topbar-links { gap: 14px; flex: none; }
  .nt-topbar-links .lbl { display: none; }
  .nt-topbar-links svg { width: 19px; height: 19px; }
}

/* ---- Sticky header ---- */
.nt-header { position: sticky; top: 0; z-index: 100; background: rgba(250,251,253,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid #E4EAF3; box-shadow: 0 6px 20px rgba(27,42,74,0.12); }
.admin-bar .nt-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .nt-header { top: 46px; } }
/* logo left · menu horizontally centred · CTA far right */
.nt-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px 20px; }
.nt-logo { justify-self: start; display: inline-flex; align-items: center; gap: 1px; text-decoration: none; font-family: var(--nt-display); font-weight: 800; font-size: 25px; letter-spacing: -0.02em; color: var(--nt-ink); }
.nt-logo .neo { color: var(--nt-ink); }
/* Logo height matches the "Preventivo gratuito" CTA button height (~40px). */
.nt-logo-img { height: 40px !important; width: auto !important; max-width: 240px; display: block; flex-shrink: 0; }
@media (max-width: 520px) { .nt-logo-img { height: 32px !important; max-width: 160px; } }
.nt-nav { justify-self: center; }
.nt-actions { justify-self: end; display: flex; align-items: center; gap: 16px; }
.nt-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.nt-menu > li { position: relative; }
.nt-menu > li > a { text-decoration: none; color: var(--nt-ink); font-weight: 700; font-size: 15px; transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 5px; }
.nt-menu > li > a:hover { color: var(--nt-blue); }
.nt-menu > li.menu-item-has-children > a::after { content: '▾'; font-size: 11px; color: var(--nt-muted); }
.nt-menu .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 12px); left: 50%; min-width: 250px; background: #FFFFFF; border: 1px solid #E4EAF3; border-radius: 14px; box-shadow: 0 18px 40px rgba(27,42,74,0.14); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 20; }
.nt-menu > li.menu-item-has-children:hover > .sub-menu, .nt-menu > li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nt-menu > li.menu-item-has-children.nt-collapsed > .sub-menu { opacity: 0 !important; visibility: hidden !important; transform: translateX(-50%) translateY(6px) !important; }
.nt-menu .sub-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nt-menu .sub-menu a { display: block; text-decoration: none; color: var(--nt-ink); font-weight: 700; font-size: 14.5px; padding: 10px 12px; border-radius: 9px; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease; }
.nt-menu .sub-menu a:hover { background: linear-gradient(120deg, #EAF6FD, #EEF1FB 60%, #F3EDF9); color: var(--nt-blue); }
.nt-cta { font-size: 15px; padding: 11px 20px; box-shadow: 0 4px 14px rgba(63,102,201,0.35); white-space: nowrap; }
.nt-cta:hover { box-shadow: 0 8px 22px rgba(63,102,201,0.45); }
.nt-burger { display: none; position: relative; background: #FFFFFF; border: 1px solid #DDE5F0; border-radius: 10px; font-family: inherit; cursor: pointer; }
/* Three bars built from one element + two pseudo-elements, all absolutely
   centered on the button via top/left:50% + translate(-50%,-50%) — this is
   pixel-exact regardless of font metrics, unlike the previous "☰"/"✕"
   text-glyph approach, whose vertical centering depends on the font's own
   (inconsistent) baseline/ascent for that specific character. */
.nt-burger-lines, .nt-burger-lines::before, .nt-burger-lines::after {
  position: absolute; left: 50%; width: 22px; height: 2.5px; border-radius: 2px; background: var(--nt-ink);
  transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}
.nt-burger-lines { top: 50%; transform: translate(-50%, -50%); }
.nt-burger-lines::before { content: ''; top: -7px; left: 0; }
.nt-burger-lines::after { content: ''; top: 7px; left: 0; }
.nt-burger.is-open .nt-burger-lines { background: transparent; }
.nt-burger.is-open .nt-burger-lines::before { transform: translateY(7px) rotate(45deg); }
.nt-burger.is-open .nt-burger-lines::after { transform: translateY(-7px) rotate(-45deg); }
.nt-mobile { display: none; }
@media (max-width: 960px) {
  .nt-nav, .nt-header .nt-cta { display: none; }
  /* With nav hidden and the CTA hidden, the old 1fr/auto/1fr split still gave
     the (now-empty) right column equal weight to the logo's column, starving
     the logo of space and forcing the browser to squeeze it — hence the
     vertical-looking stretch. auto/1fr gives the logo exactly what it needs
     and lets .nt-actions (justify-self:end) claim the rest, right-aligned. */
  .nt-header-inner { grid-template-columns: auto 1fr; padding: 8px 16px; }
  /* Square box (equal width/height) with the "☰"/"✕" glyph centered on both
     axes via flex, rather than relying on padding to balance it. */
  /* The parent theme sets a global `button { min-height: 2.4em }`, which at
     font-size:26px works out to 62.4px and silently overrides a smaller
     explicit height (min-height always wins over height, and since nothing
     else here declared min-height, that lone parent rule applied unopposed)
     — hence the box wasn't actually square. min-height:0 removes that floor. */
  .nt-burger { display: block; width: 46px; height: 46px; min-height: 0; padding: 0; }

  .nt-mobile.open { display: block; border-top: 1px solid #E4EAF3; background: #FFFFFF; padding: 10px 16px 18px; }
  .nt-mobile-menu, .nt-mobile-menu .sub-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .nt-mobile-menu > li > a { display: block; text-decoration: none; color: var(--nt-ink); font-weight: 800; font-size: 17px; padding: 12px 10px; border-radius: 10px; }
  .nt-mobile-menu .sub-menu a { display: block; text-decoration: none; font-size: 15px; font-weight: 700; padding: 9px 10px 9px 24px; border-radius: 10px; color: var(--nt-body); }
  .nt-mobile .btn-primary { display: block; text-align: center; margin-top: 10px; color: #FFFFFF; box-shadow: none; }
}

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #F1F7FC 0%, #FAFBFD 85%); padding: clamp(36px, 6vw, 66px) 20px clamp(32px, 5vw, 56px); }
.hero-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-inner { position: relative; max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 52px); align-items: center; }
.hero-copy { flex: 1 1 380px; min-width: 0; animation: ntRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero h1 { margin: 0 0 18px; font-family: var(--nt-display); font-size: clamp(34px, 5vw, 52px); line-height: 1.09; font-weight: 800; color: var(--nt-ink); letter-spacing: -0.02em; text-wrap: balance; }

/* ---- Calculator ---- */
.calc-frame { flex: 1.25 1 400px; min-width: 0; border-radius: 22px; padding: 4px; background-image: var(--nt-grad-border); box-shadow: 0 24px 60px rgba(27,42,74,0.16); animation: ntRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both; }
.calc-body { background: #FFFFFF; border-radius: 18px; padding: clamp(20px, 3vw, 28px); }
.chip { font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; padding: 9px 13px; border-radius: 10px; border: none; box-shadow: inset 0 0 0 1.5px #DDE5F0; background: var(--nt-bg); color: var(--nt-body); white-space: nowrap; transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.chip:hover { transform: translateY(-1px); }
.chip:active { transform: scale(0.97); }
.chip.active { color: #FFFFFF; background: linear-gradient(100deg, #2BB7E8, #3F66C9 60%, #7E4FA8); box-shadow: 0 4px 12px rgba(63,102,201,0.35); }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-radius: 12px; padding: 14px 16px; }
.calc-num { font-size: clamp(22px, 3vw, 28px); font-weight: 800; font-family: var(--nt-display); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Cards / grids ---- */
.cards-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 24px; }
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.cards-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px; }
.card-flex { display: flex; flex-direction: column; }
.card-pad { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-h3 { margin: 0; font-family: var(--nt-display); font-size: 21px; font-weight: 800; color: var(--nt-ink); letter-spacing: -0.01em; }
.neotab-page .card-list { margin: 0; padding: 0; list-style: none !important; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.45; }
.neotab-page .card-list li { position: relative; padding-left: 22px; list-style: none !important; }
.neotab-page .card-list li::before { content: "\2022"; position: absolute; left: 1px; top: 0; color: #7E4FA8; font-weight: 700; font-size: 24px; line-height: 22px; }
.card-callout { margin: 0; background: #F3EDF9; border-radius: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; color: #45325B; }

/* ---- Photo placeholders ---- */
.photo-slot { height: 100%; display: grid; place-items: center; box-sizing: border-box; padding: 16px; background: linear-gradient(120deg, #EAF6FD, #EEF1FB 60%, #F3EDF9); background-size: cover; background-position: center; }
.photo-slot.has-img { padding: 0; overflow: hidden; }
/* Compound selector needed to out-specificity the global
   "body.neotab-page img { height: auto; }" reset — a plain .photo-slot-img
   rule loses to it, so the <img> fell back to its natural aspect ratio
   instead of filling the fixed-height slot (visible gradient background
   above/below, worse on narrow mobile cards where that mismatch is larger). */
.photo-slot.has-img .photo-slot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Lavori screenshots: keep the top of the image, crop the bottom. */
.cards-3 .photo-slot { background-position: top center; }
.photo-slot span { font-size: 13.5px; font-weight: 700; color: var(--nt-faint); text-align: center; border: 1.5px dashed #C7D6EF; border-radius: 10px; padding: 10px 14px; background: rgba(255,255,255,0.55); }

/* ---- Service cards ---- */
.svc-h3 { margin: 0; padding: 16px 28px; background-image: var(--nt-grad), linear-gradient(120deg, #EAF6FD, #EEF1FB 60%, #F3EDF9); background-size: 100% 1.5px, 100% 100%; background-position: left bottom, left top; background-repeat: no-repeat; font-family: var(--nt-display); font-size: 21px; font-weight: 800; color: var(--nt-ink); letter-spacing: -0.01em; }
.svc-list { display: grid; gap: 14px; padding: 20px 28px 28px; }
.svc-name { margin: 0; font-size: 16px; font-weight: 800; color: var(--nt-ink); }
.svc-desc { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; }

/* ---- Chat showcase ---- */
.chat-card { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.chat-label { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.bubble { max-width: 85%; padding: 10px 14px; font-size: 15px; line-height: 1.45; }
.bubble.user { align-self: flex-end; background: #E7F5E9; border-radius: 14px 14px 4px 14px; color: #24402A; }
.bubble.bot { align-self: flex-start; background: #EEF3FC; border-radius: 14px 14px 14px 4px; color: var(--nt-ink); }
.bubble.voice-bot { align-self: flex-start; max-width: 90%; background: #F3EDF9; border-radius: 14px 14px 14px 4px; color: #45325B; }
.bubble.voice-user { align-self: flex-end; max-width: 90%; background: #F2F6FB; border-radius: 14px 14px 4px 14px; color: var(--nt-body); }
.chat-note { margin: 8px 0 0; font-size: 13.5px; color: var(--nt-faint); }
.wave { display: flex; align-items: center; gap: 4px; height: 30px; margin-bottom: 4px; }
.wave span { width: 4px; height: 26px; border-radius: 2px; background: linear-gradient(180deg, #2BB7E8, #7E4FA8); transform-origin: center; animation: ntPulse 1.375s ease-in-out infinite; }

/* ---- Animated brand icons (service + chat card headers) ---- */
@keyframes ntDotPulse { 0%,100% { transform: scale(0.82); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes ntBounceDot { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes ntSweepX { 0%,100% { width: 25%; opacity: 0.85; } 50% { width: 88%; opacity: 1; } }
.nt-icon-web { width: 40px; height: 32px; flex: none; border-radius: 8px; border: 2px solid #3F66C9; background: #FFFFFF; overflow: hidden; display: flex; flex-direction: column; }
.nt-web-chrome { height: 8px; flex: none; border-bottom: 1.5px solid #3F66C9; display: flex; align-items: center; gap: 2px; padding: 0 4px; background: #F2F6FB; }
.nt-web-chrome span { width: 3px; height: 3px; border-radius: 50%; background: #3F66C9; opacity: .55; display: block; }
.nt-web-body { flex: 1; display: flex; align-items: center; padding: 0 5px; }
.nt-web-track { width: 100%; height: 4px; border-radius: 2px; background: #E4EAF3; position: relative; overflow: hidden; display: block; }
.nt-web-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg,#2BB7E8,#3F66C9,#7E4FA8); animation: ntSweepX 2.25s ease-in-out infinite; display: block; }
.nt-icon-foto { width: 40px; height: 40px; flex: none; position: relative; display: flex; align-items: center; justify-content: center; }
.nt-foto-viewfinder { position: absolute; top: 5px; left: 13px; width: 12px; height: 6px; border: 2px solid #3F66C9; border-bottom: none; border-radius: 3px 3px 0 0; background: #FFFFFF; }
.nt-foto-body { width: 32px; height: 21px; border: 2px solid #3F66C9; border-radius: 5px; background: #FFFFFF; margin-top: 5px; display: flex; align-items: center; justify-content: center; }
.nt-foto-lens { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #3F66C9; background: linear-gradient(135deg,#2BB7E8,#7E4FA8); display: block; animation: ntDotPulse 2s ease-in-out infinite; }
.nt-icon-marketing { width: 40px; height: 32px; flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.nt-icon-marketing span { width: 6px; border-radius: 2px; background: linear-gradient(180deg,#2BB7E8,#7E4FA8); transform-origin: bottom; display: block; animation: ntPulse 1.625s ease-in-out infinite; }
.nt-icon-ai { width: 48px; height: 20px; flex: none; display: flex; align-items: center; }
.nt-ai-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: block; background: linear-gradient(135deg,#2BB7E8,#7E4FA8); animation: ntDotPulse 1.875s ease-in-out infinite; }
.nt-ai-line { flex: 1; height: 1.5px; background: #C7D6EF; min-width: 6px; display: block; }
.nt-icon-chat { display: inline-flex; align-items: center; gap: 3px; padding: 0 10px; height: 24px; border-radius: 12px 12px 12px 4px; border: 2px solid #3F66C9; background: #FFFFFF; flex: none; }
.nt-icon-chat span { width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(180deg,#2BB7E8,#7E4FA8); display: block; animation: ntBounceDot 1.5s ease-in-out infinite; }
/* place icons on the right of the card headers */
.svc-h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.chat-head .chat-label { margin: 0; }
.chat-head .wave { margin: 0; }

/* ---- Bandi steps ---- */
.step-card { display: flex; gap: 16px; border-radius: 14px; padding: 18px 20px; }
.step-num { flex: none; width: 38px; height: 38px; border-radius: 999px; color: #FFFFFF; font-weight: 800; font-size: 17px; display: grid; place-items: center; }
.step-title { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--nt-ink); }
.step-desc { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; }

/* ---- Come lavoriamo: timeline ---- */
.nt-tl-desktop { display: block; }
.nt-tl-wave { position: relative; height: 130px; }
.nt-tl-wave svg.nt-tl-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.nt-tl-nodes { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); }
.nt-tl-node { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.nt-tl-halo { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
.nt-tl-node.raised .nt-tl-halo { transform: translateY(-58px); }
.nt-tl-ring { width: 64px; height: 64px; border-radius: 50%; border: 2px solid transparent; background-image: linear-gradient(var(--tint, #EEF3FC), var(--tint, #EEF3FC)), linear-gradient(135deg, #2BB7E8, #3F66C9 55%, #7E4FA8); background-origin: border-box; background-clip: padding-box, border-box; display: flex; align-items: center; justify-content: center; }
.nt-tl-ring svg { color: #3F66C9; display: block; width: 32px; height: 32px; }
.nt-tl-text-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 4px; }
.nt-tl-text-row > div { text-align: center; padding: 0 6px; }
/* Steps 2 & 4 sit under a raised icon; pull their text up by the same amount so the
   icon-to-title gap matches steps 1, 3, 5. */
.nt-tl-text-row > div:nth-child(2), .nt-tl-text-row > div:nth-child(4) { margin-top: -58px; }
.nt-tl-num { display: block; margin-bottom: 8px; font-weight: 800; font-size: 13.5px; background: linear-gradient(100deg, #2BB7E8, #3F66C9 55%, #7E4FA8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nt-tl-title { margin: 0 0 6px; font-family: var(--nt-display); font-size: 16px; font-weight: 800; color: #1B2A4A; }
.nt-tl-desc { margin: 0 auto; max-width: 190px; font-size: 13.5px; line-height: 1.5; color: #3D4C68; }
.nt-tl-mobile { display: none; }
.nt-tl-mobile-track { position: relative; overflow-x: clip; }
/* Spans the full row width now (not a fixed centered lane) — the circle's
   column position alternates per row, so the connecting curve needs the
   whole width to actually reach it on either side. Purely decorative/behind
   the icons (z-index:0), so it approximates the circle's exact edge position
   rather than tracking it pixel-for-pixel. */
.nt-tl-line-mobile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
/* Text stays anchored at its own row's edge (left edge for text-left rows,
   right edge for text-right — via margin-right/margin-left:auto) and is
   capped to 46% width, leaving a wide gap on the circle's side. The circle
   is pulled IN from the row's far edge toward center (not left at the
   extreme 12%/88% edge) via absolute positioning, matching the wireframe's
   actual circle placement (measured off the reference image at ~34%/~61%
   across, not flush against the edges). Text position/width is NOT
   transformed/shifted off-row — an earlier attempt shifted the whole row
   ±30% via transform, which clipped/hid part of the text off-screen for
   the left-shifting rows; this avoids that by only moving the circle. */
.nt-tl-row { position: relative; z-index: 1; padding: 10px 0; min-height: 64px; }
.nt-tl-row .side { max-width: 46%; }
.nt-tl-row.nt-tl-row--text-left .side { margin-right: auto; }
.nt-tl-row.nt-tl-row--text-right .side { margin-left: auto; }
.nt-tl-node-wrap { position: absolute; top: 50%; width: 64px; height: 64px; }
.nt-tl-row.nt-tl-row--text-left .nt-tl-node-wrap { left: 61%; transform: translate(-50%, -50%); }
.nt-tl-row.nt-tl-row--text-right .nt-tl-node-wrap { left: 34%; transform: translate(-50%, -50%); }
.nt-tl-halo-sm { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.nt-tl-ring-sm { width: 50px; height: 50px; border-radius: 50%; border: 2px solid transparent; background-image: linear-gradient(var(--tint, #EEF3FC), var(--tint, #EEF3FC)), linear-gradient(135deg, #2BB7E8, #3F66C9 55%, #7E4FA8); background-origin: border-box; background-clip: padding-box, border-box; display: flex; align-items: center; justify-content: center; }
.nt-tl-ring-sm svg { color: #3F66C9; display: block; width: 27px; height: 27px; }
@media (max-width: 899px) {
  .nt-tl-desktop { display: none; }
  .nt-tl-mobile { display: block; }
  /* Tighten the vertical rhythm further (row padding was already trimmed);
     these margins are shared with desktop's layout, so scope the reduction
     to mobile only. */
  .nt-tl-row { padding: 3px 0; }
  .nt-tl-num { margin-bottom: 2px; }
  .nt-tl-title { margin: 0 0 2px; }
  .nt-tl-desc { line-height: 1.4; }
}

/* ---- Form ---- */
.form-label { font-size: 15px; font-weight: 800; color: var(--nt-ink); }
.form-field { font-family: inherit; font-size: 16px; padding: 13px 14px; border: 1.5px solid #DDE5F0; border-radius: 10px; background: var(--nt-bg); color: var(--nt-ink); width: 100%; box-sizing: border-box; transition: border-color 0.2s ease, background 0.2s ease; }
.form-field:focus { border-color: var(--nt-blue); background: #FFFFFF; }
/* Readable Settore dropdown (override parent-theme select styling). */
.neotab-page select.form-field { color: #1B2A4A !important; background-color: #FAFBFD !important; -webkit-appearance: menulist; appearance: menulist; padding: 10px 14px !important; line-height: 1.4 !important; height: auto !important; min-height: 48px; }
.neotab-page select.form-field option { color: #1B2A4A; background-color: #FFFFFF; }
.form-notice { background: #EEF3FC; border-radius: 12px; padding: 18px 20px; }
.form-notice.error { background: #FDECEC; }
/* Contact details: label + value on one row, values sharing a left edge. */
.contact-details { display: grid; gap: 12px; text-align: left; }
.contact-details .cd-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.5; }
.contact-details .cd-k { font-weight: 800; color: var(--nt-ink); }
.contact-details .cd-v { color: var(--nt-body); }
.contact-details a.cd-v { color: var(--nt-blue); font-weight: 800; text-decoration: none; }
.contact-details a.cd-v:hover { color: var(--nt-purple); }

/* ---- Floating WhatsApp ---- */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #FFFFFF; font-weight: 800; font-size: 15px; padding: 13px 20px; border-radius: 14px; background-color: #1FAF54; background-image: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 60%); background-size: 240% 100%; background-position: 130% 0; background-repeat: no-repeat; box-shadow: 0 8px 24px rgba(20,32,58,0.3); transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, background-position 0.55s ease; }
.wa-float:hover { background-color: #189347; color: #FFFFFF; transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 30px rgba(20,32,58,0.35); background-position: -70% 0; }
.wa-float:active { color: #FFFFFF; transform: scale(0.97); }

/* ---- Interior pages ---- */
.page-hero { background: linear-gradient(180deg, #F1F7FC 0%, #FAFBFD 92%); border-bottom: 1px solid #E9EFF7; padding: clamp(30px, 5vw, 56px) 20px; }
.page-hero h1 { margin: 0; font-family: var(--nt-display); font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; color: var(--nt-ink); letter-spacing: -0.02em; text-wrap: balance; }
.page-hero .lead { margin: 14px 0 0; font-size: clamp(16.5px, 2vw, 19px); line-height: 1.6; max-width: 40em; color: var(--nt-body); }
.page-body { padding: clamp(34px, 5vw, 60px) 20px; }
.page-body-wrap { max-width: 880px; margin: 0 auto; }
.page-body h2 { font-family: var(--nt-display); color: var(--nt-ink); font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.01em; margin: 1.7em 0 0.5em; }
.page-body h3 { font-family: var(--nt-display); color: var(--nt-ink); font-size: 20px; margin: 1.3em 0 0.4em; }
.page-body p, .page-body li { font-size: 17px; line-height: 1.7; }
.page-body ul { padding-left: 20px; display: grid; gap: 6px; }
.page-body > *:first-child { margin-top: 0; }

/* ---- Grant strip ---- */
.neotab-page .nt-grantstrip a { color: #FFFFFF !important; font-weight: 800; font-size: clamp(15px, 2vw, 18px); text-decoration: none; display: inline-block; transition: opacity 0.2s ease; }
.neotab-page .nt-grantstrip a:hover { color: #FFFFFF !important; opacity: 0.9; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Radar Bandi ---- */
/* Left column = one Lavori project-column wide; right column spans the 2nd+3rd
   project columns (24px gutter, matching the Lavori cards-3 grid). */
.radar-grid { display: grid; gap: 24px; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 992px) { .radar-grid { grid-template-columns: calc((100% - 48px) / 3 - 40px) 1fr; column-gap: 64px; } }
.radar-left > p { font-size: 16px; line-height: 1.6; color: var(--nt-body); margin: 0 0 16px; max-width: 34em; }
.radar-left p strong { color: var(--nt-ink); }
.radar-board { display: grid; gap: 12px; }
.radar-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
.radar-card { padding: 15px 18px; border-radius: 14px; display: grid; gap: 3px; }
.radar-card .radar-head { margin-bottom: 0; }
.radar-head { display: flex; align-items: flex-start; gap: 10px; }
.radar-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 5px; box-shadow: 0 0 0 3px rgba(27,42,74,0.05); }
.radar-idn { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.radar-name { font-family: var(--nt-display); font-weight: 800; color: var(--nt-ink); font-size: 16px; }
.radar-prov { font-size: 12.5px; color: var(--nt-muted); }
.radar-prov::before { content: "·"; margin-right: 6px; color: var(--nt-faint); }
.radar-status { margin-left: auto; align-self: flex-start; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.radar-status.open { background: #E7F5EC; color: #1B7F45; }
.radar-status.warn { background: #FBF1DA; color: #8A6516; }
.radar-status.closed { background: #FBE9E7; color: #A23A2C; }
.radar-line { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--nt-body); }
.radar-line strong { color: var(--nt-ink); }
.radar-caption { margin: 6px 2px 0; font-size: 12.5px; color: var(--nt-faint); }

/* ---- Footer ---- */
.site-footer { background: var(--nt-dark); padding: 34px 20px 38px; }
.site-footer a { color: #A9B7D4; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; }
.site-footer a:hover { color: #FFFFFF; }
.footer-break { display: none; }
.footer-break-2 { display: none; }
/* Extra blank line so the fixed-position WhatsApp button (bottom-right of
   the viewport) doesn't sit on top of the last line of footer text on
   desktop, where the footer content is short enough to reach the bottom. */
.footer-space-desktop { display: block; content: ""; height: 22px; }
@media (max-width: 640px) {
  .footer-break { display: block; }
  .footer-break-2 { display: block; }
  .footer-sep { display: none; }
  .footer-sep-2 { display: none; }
  .footer-space-desktop { display: none; }
}

/* ---- Scroll reveal ---- */
@supports (animation-timeline: view()) {
  .rise { animation: ntRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-timeline: view(); animation-range: entry 0% entry 28%; }
  .rise-1 { animation: ntRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-timeline: view(); animation-range: entry 0% entry 26%; }
  .rise-2 { animation: ntRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-timeline: view(); animation-range: entry 6% entry 32%; }
  .rise-s1 { animation: ntRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-timeline: view(); animation-range: entry 0% entry 24%; }
  .rise-s2 { animation: ntRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-timeline: view(); animation-range: entry 5% entry 29%; }
  .rise-s3 { animation: ntRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-timeline: view(); animation-range: entry 10% entry 34%; }
  .rise-s4 { animation: ntRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-timeline: view(); animation-range: entry 15% entry 39%; }
}

@media (prefers-reduced-motion: reduce) {
  .neotab-page * { animation: none !important; transition: none !important; }
  /* body.neotab-page itself isn't matched by ".neotab-page *" (descendants
     only), so its first-paint fade needs its own override here. */
  body.neotab-page { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Hero aurora: canvas-driven color blocks + cursor water-ripples ----
   Continuous procedural motion (sin/cos-drifting radial gradients redrawn
   every frame) reads as much more "alive" than looping CSS keyframes, and
   lets the cursor ripple draw into the very same canvas with no separate
   bordered layer. main.js owns all the drawing; this is just the mount point. */
.hero-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.nt-aurora-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Very light white wash sized/positioned in JS to match the real .hero-copy
   text block. A single linear-gradient can only feather one edge, and the
   request is a soft edge on all four sides, so this is a plain solid fill
   softened by a CSS blur() instead — blur() accepts length units directly,
   so 1.5cm is literal, and it feathers uniformly in every direction with no
   gradient math needed. */
.hero-text-feather { position: absolute; left: 0; top: 0; width: 0; height: 0; background: rgba(250,251,253,0.85); filter: blur(1.5cm); -webkit-filter: blur(1.5cm); }

/* ---- AI agents: dark spotlight band ---- */
.nt-ai-showcase { position: relative; overflow: hidden; margin-top: 56px; padding: clamp(28px,4vw,48px); border-radius: 24px; background: radial-gradient(130% 130% at 50% -10%, #22345A 0%, #14203A 58%); box-shadow: 0 30px 70px rgba(20,32,58,0.28); }
.nt-ai-showcase::before { content: ""; position: absolute; top: -28%; left: 50%; width: 80%; height: 70%; transform: translateX(-50%); background: radial-gradient(circle, rgba(63,102,201,0.40), transparent 62%); filter: blur(50px); z-index: 0; pointer-events: none; }
.nt-ai-showcase > * { position: relative; z-index: 1; }
.nt-ai-title { margin: 0 0 8px; font-family: var(--nt-display); font-size: clamp(22px,3vw,28px); font-weight: 800; color: #FFFFFF; letter-spacing: -0.015em; }
.nt-ai-lead { margin: 0 0 26px; font-size: 16.5px; line-height: 1.6; max-width: 42em; color: #C4D2EC; }
.nt-ai-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; }
.neotab-page .nt-ai-showcase .nt-ai-link { color: #8FC7F2 !important; font-size: 16.5px; }
.neotab-page .nt-ai-showcase .nt-ai-link:hover { color: #BBDCF8 !important; }

/* ---- Portfolio browser frames ---- */
.nt-browser { background: #FFFFFF; }
.nt-browser-bar { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: #F2F6FB; border-bottom: 1px solid #E4EAF3; }
.nt-browser-dots { display: flex; gap: 5px; flex: none; }
.nt-browser-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.nt-browser-dots i:nth-child(1) { background: #ED6A5E; }
.nt-browser-dots i:nth-child(2) { background: #F4BF4F; }
.nt-browser-dots i:nth-child(3) { background: #61C554; }
.nt-browser-url { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: #8A96AC; background: #FFFFFF; border: 1px solid #E4EAF3; border-radius: 7px; padding: 4px 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-browser-view { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(120deg, #EAF6FD, #EEF1FB 60%, #F3EDF9); }
.nt-browser-shot { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: top center; transition: transform 2.4s cubic-bezier(0.22,0.61,0.36,1); }
.g-card:hover .nt-browser:not(.is-fullpage) .nt-browser-shot { transform: scale(1.07); }
.nt-browser-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13.5px; font-weight: 700; color: #8A96AC; text-align: center; padding: 16px; }

/* Full-page (tall) screenshots: taller window, scrolled by the mouse wheel
   while hovering (main.js adds .is-fullpage when the uploaded image is much
   taller than the frame — ordinary 16:9 crops keep the CSS zoom instead). */
.nt-browser.is-fullpage .nt-browser-view { aspect-ratio: 16 / 11; cursor: ns-resize; }
.nt-browser.is-fullpage .nt-browser-shot { height: auto !important; bottom: auto; object-fit: fill; transition: transform 0.12s ease-out; }

/* ---- Come lavoriamo: dark band + traveling pulse ---- */
.nt-section-dark { background: radial-gradient(120% 130% at 50% 0%, #22345A 0%, #14203A 60%); }
.nt-section-dark .section-h2 { color: #FFFFFF; }
.nt-section-dark .eyebrow { color: #8FC7F2; }
.nt-section-dark .nt-tl-title { color: #FFFFFF; }
.nt-section-dark .nt-tl-desc { color: #C4D2EC; }
/* One-shot border-shine, triggered by main.js exactly when the flowing line
   passes each icon (computed from real SVG path geometry, not guessed delays). */
.nt-section-dark .nt-tl-ring, .nt-section-dark .nt-tl-ring-sm { position: relative; }
.nt-section-dark .nt-tl-ring.nt-shine, .nt-section-dark .nt-tl-ring-sm.nt-shine { animation: ntRingShine 0.9s ease-out; }
@keyframes ntRingShine {
  0% { box-shadow: 0 0 0 0 rgba(220,235,255,0); }
  30% { box-shadow: 0 0 0 3px rgba(220,235,255,0.9), 0 0 16px 2px rgba(140,205,255,0.7); }
  100% { box-shadow: 0 0 0 0 rgba(220,235,255,0); }
}