/* ==========================================================================
   Deliver — Stili principali
   1. Base   2. Layout   3. Tipografia   4. Componenti   5. Header
   6. Sezioni homepage   7. Pagine interne   8. Footer   9. Movimento
   ========================================================================== */

/* 1. BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: var(--tracking-head); line-height: var(--lh-head); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-xs); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--s-4); top: var(--s-4); z-index: 100;
  padding: var(--s-3) var(--s-4); background: var(--ink); color: #fff; font-weight: 600;
  transform: translateY(-200%); transition: transform var(--t-fast);
}
.skip-link:focus { transform: none; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; font-weight: 500; }
.muted { color: var(--muted); }

/* 2. LAYOUT -------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

/* 3. TIPOGRAFIA ---------------------------------------------------------- */
.h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-display); line-height: 1.06; }
.h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }

.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s-5);
}
.eyebrow--light { color: var(--blu-300); }
.section-index .mono { color: var(--arancio-700); letter-spacing: 0.06em; }
.section-index .mono::after { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; margin-left: var(--s-3); vertical-align: middle; opacity: .6; }
.eyebrow--light.section-index .mono, .approach .section-index .mono { color: var(--arancio); }

.section-head { display: grid; gap: var(--s-5); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); max-width: 60rem; }
.section-head--split { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 960px) {
  .section-head--split { grid-template-columns: 7fr 5fr; gap: var(--s-8); }
}
.section-intro { color: var(--muted); font-size: 1.0625rem; max-width: 40rem; }
.br-lg { display: none; }
@media (min-width: 1100px) { .br-lg { display: inline; } }

/* 4. COMPONENTI ---------------------------------------------------------- */
/* Pulsanti: lato sinistro netto, lato destro a semicerchio — la "D" del logo. */
.btn {
  --btn-bg: var(--blu); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 52px; padding: .85rem 1.6rem .85rem 1.35rem;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; letter-spacing: -0.005em;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd);
  border-radius: var(--radius-xs) var(--radius-d) var(--radius-d) var(--radius-xs);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn .arrow { transition: transform var(--t-base) var(--ease-out); }
.btn:hover .arrow, .link-arrow:hover .arrow, a:hover > .link-arrow .arrow { transform: translateX(4px); }
.btn--primary:hover { --btn-bg: var(--ink); }
.btn--accent { --btn-bg: var(--arancio); --btn-fg: var(--ink); }
.btn--accent:hover { --btn-bg: #F48D66; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.32); }
.btn--ghost-light:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.06); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { --btn-bg: var(--blu-950); }
.btn--sm { min-height: 42px; padding: .55rem 1.2rem .55rem 1rem; font-size: .9375rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; color: var(--ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px; transition: background-size var(--t-base) var(--ease-out);
}
.link-arrow .arrow { transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover, a:hover > .link-arrow { background-size: 100% 1px; }

/* Segnaposti dichiarati */
.placeholder-tag {
  display: inline-block; margin-bottom: var(--s-4); padding: .3rem .6rem;
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--arancio-700); background: var(--arancio-50); border: 1px dashed var(--arancio-200);
}
.placeholder-note { margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--muted); padding-left: var(--s-3); border-left: 2px solid var(--arancio-200); }
.placeholder-inline { color: var(--arancio-700); font-family: var(--font-mono); font-size: .8125rem; }
.demo-banner {
  margin-bottom: var(--s-6); padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small); color: var(--text);
  background: var(--arancio-50); border: 1px dashed var(--arancio-200); border-radius: var(--radius-xs);
}
.tag { display: inline-block; padding: .15rem .45rem; margin-right: .5rem; border-radius: var(--radius-xs); }
.tag--demo { background: var(--arancio-50); color: var(--arancio-700); border: 1px dashed var(--arancio-200); }

/* Punto elenco a forma di D (pittogramma) */
.d-bullet, .family-list li::before, .compare-b::before, .stub-list li::before {
  content: ""; flex: none; width: 10px; height: 8px; margin-top: .55em;
  background: var(--arancio); border-radius: 0 999px 999px 0;
}

/* 5. HEADER -------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: #fff;
  transition: background-color var(--t-base), color var(--t-base), box-shadow var(--t-base), transform var(--t-base) var(--ease-out);
}
.header-bar { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.brand { position: relative; display: block; flex: none; width: 168px; }
.brand-logo { width: 100%; height: auto; transition: opacity var(--t-base); }
.brand-logo--dark { position: absolute; inset: 0; opacity: 0; }
.site-header.is-solid { background: rgba(255,255,255,.97); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
@supports (backdrop-filter: blur(10px)) { .site-header.is-solid { background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(14px); } }
/* backdrop-filter crea un containing block per i figli fixed: va tolto col menu mobile aperto */
.menu-open .site-header.is-solid { background: #fff; backdrop-filter: none; }
.site-header.is-solid .brand-logo--light { opacity: 0; }
.site-header.is-solid .brand-logo--dark { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }

.nav { display: none; }
.nav-list { display: flex; gap: var(--s-1); }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem .8rem; font-size: .9875rem; font-weight: 500; text-decoration: none; color: inherit;
}
.nav-link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1.5px;
  background: var(--arancio); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-expanded="true"]::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.chev { transition: transform var(--t-base) var(--ease-out); }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.header-cta { display: none; }
.site-header:not(.is-solid) .header-cta { --btn-bg: #fff; --btn-fg: var(--ink); }
.site-header:not(.is-solid) .header-cta:hover { --btn-bg: var(--arancio); }

/* Supporto: accesso rapido distinto ma sobrio */
.support { position: relative; }
.support-trigger {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 42px; padding: .5rem .9rem;
  font-size: .9375rem; font-weight: 600; border: 1px solid currentColor; border-color: rgba(255,255,255,.3);
  border-radius: var(--radius-xs) var(--radius-d) var(--radius-d) var(--radius-xs);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.is-solid .support-trigger { border-color: var(--line-strong); }
.support-trigger:hover, .support-trigger[aria-expanded="true"] { border-color: var(--arancio); }
.support-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--arancio); box-shadow: 0 0 0 3px rgba(239,119,74,.22); }

.dropdown { color: var(--text); }
.support-panel {
  position: absolute; right: 0; top: calc(100% + 12px); width: min(360px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-5); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
}
.support-panel-title { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.support-links a {
  position: relative; display: grid; gap: .15rem; padding: var(--s-3) var(--s-6) var(--s-3) var(--s-3); margin-inline: calc(-1 * var(--s-3));
  text-decoration: none; border-radius: var(--radius-s); transition: background-color var(--t-fast);
}
.support-links a:hover { background: var(--blu-50); }
.support-link-label { font-weight: 600; color: var(--ink); }
.support-link-desc { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.support-link-desc.mono { font-size: .8125rem; color: var(--ink); text-transform: none; }
.support-links .ext { position: absolute; right: var(--s-3); top: 1.05rem; color: var(--muted); }
.support-panel-more { display: block; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }

/* Mega menu servizi */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(18,30,38,.35);
}
.mega-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-7); padding-block: var(--s-7) var(--s-5); }
.mega-feature {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6);
  color: #fff; background: var(--blu); text-decoration: none;
  border-radius: var(--radius-s) 120px 120px var(--radius-s);
  transition: background-color var(--t-base);
}
.mega-feature:hover { background: var(--blu-900); }
.mega-feature .eyebrow { margin: 0; color: var(--arancio); }
.mega-feature-title { font-size: 1.75rem; font-weight: 600; letter-spacing: var(--tracking-head); }
.mega-feature-text { color: var(--blu-200); font-size: var(--fs-small); max-width: 30ch; }
.mega-feature .link-arrow { color: #fff; margin-top: auto; padding-top: var(--s-4); }
.mega-families { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.mega-col-title { display: block; padding-bottom: var(--s-3); margin-bottom: var(--s-3); border-bottom: 2px solid var(--ink); font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.25; min-height: 3.1em; }
.mega-col-title:hover { color: var(--arancio-700); }
.mega-col li a { display: block; padding: .35rem 0; font-size: var(--fs-small); color: var(--muted); text-decoration: none; }
.mega-col li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mega-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-small); }
.mega-foot a { color: var(--muted); text-decoration: none; }
.mega-foot a strong { color: var(--ink); }
.mega-foot a:hover { color: var(--ink); }
.mega-foot a:last-child { font-weight: 600; color: var(--ink); }

/* Dropdown: animazione di apertura */
.dropdown:not([hidden]) { animation: drop-in var(--t-base) var(--ease-out); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Menu mobile */
.menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; }
.menu-toggle-lines { position: relative; width: 22px; height: 12px; }
.menu-toggle-lines span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--t-base) var(--ease-out), top var(--t-base) var(--ease-out); }
.menu-toggle-lines span:first-child { top: 0; }
.menu-toggle-lines span:last-child { top: 10.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:last-child { top: 5px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--ink); padding-block: var(--s-5) var(--s-7);
}
.mobile-menu:not([hidden]) { animation: drop-in var(--t-base) var(--ease-out); }
.mobile-support { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-5); }
.mobile-support-link {
  display: grid; place-items: center; min-height: 52px; padding: var(--s-2); text-align: center;
  font-size: .875rem; font-weight: 600; text-decoration: none; line-height: 1.2;
  background: var(--blu-50); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.mobile-support-link:first-child { background: var(--blu); color: #fff; border-color: var(--blu); }
.mobile-nav > li { border-bottom: 1px solid var(--line); }
.mobile-nav > li > a, .mobile-group summary {
  display: flex; justify-content: space-between; align-items: center; min-height: 60px;
  font-size: 1.375rem; font-weight: 600; letter-spacing: var(--tracking-head); text-decoration: none; cursor: pointer;
}
.mobile-group summary { list-style: none; }
.mobile-group summary::-webkit-details-marker { display: none; }
.mobile-group summary::after { content: "+"; font-weight: 400; font-size: 1.6rem; color: var(--arancio-700); transition: transform var(--t-base); }
.mobile-group[open] summary::after { transform: rotate(45deg); }
.mobile-group ul { padding: 0 0 var(--s-4) var(--s-3); border-left: 2px solid var(--arancio); margin-bottom: var(--s-4); }
.mobile-group li a { display: block; padding: .55rem 0 .55rem var(--s-3); color: var(--text); text-decoration: none; }
.mobile-menu .btn { margin-top: var(--s-6); }
.mobile-contact { margin-top: var(--s-4); text-align: center; text-transform: none; color: var(--muted); }
.mobile-contact a { color: var(--ink); }
body.menu-open { overflow: hidden; }

@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
}
@media (min-width: 1100px) {
  :root { --header-h: 84px; }
  .brand { width: 184px; }
  .nav { display: block; }
  .menu-toggle, .mobile-menu { display: none !important; }
}
@media (max-width: 1099.98px) { .mega { display: none !important; } }
@media (max-width: 420px) {
  .brand { width: 136px; }
  .support-trigger { padding-inline: .7rem; }
  .support-trigger .chev { display: none; }
}

/* 6. SEZIONI HOMEPAGE ---------------------------------------------------- */

/* Hero: presentazione istituzionale. Titolo = le tre aree, visual = i livelli dell'infrastruttura. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--blu); color: #fff;
  padding-top: calc(var(--header-h) + clamp(2.25rem, 1rem + 3.5vw, 4.5rem));
  padding-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
}
.hero-grid { display: grid; gap: clamp(3rem, 2rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero-title {
  font-size: clamp(2.15rem, 1.2rem + 4.2vw, 4.6rem); line-height: 1.02; letter-spacing: var(--tracking-display);
  font-weight: 600; color: #fff; margin-bottom: var(--s-6); text-wrap: initial;
}
.hero-title .line { display: block; white-space: nowrap; }
.hero-title .dot { color: var(--arancio); }
.hero-lead { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--blu-200); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-client { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); font-size: var(--fs-small); color: var(--blu-300); }
.hero-client a { color: #fff; font-weight: 600; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.hero-client a:hover { text-decoration-color: var(--arancio); }

/* Livelli dell'infrastruttura (geometria del pittogramma) */
/* Larghezza scelta perché l'altezza del diagramma coincida con quella del blocco di testo */
.layers { margin: 0; width: 100%; max-width: 410px; justify-self: end; }
.layers-svg { width: 100%; height: auto; overflow: visible; }
.layers-svg path { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 1.5; stroke-linecap: round; transition: stroke var(--t-base), stroke-width var(--t-base); }
.layers-svg .layer--outer path { stroke: #fff; stroke-width: 3.5; }
.layers-svg .layer-core { fill: var(--arancio); stroke: none; transition: fill var(--t-base); }
.layers-svg text { fill: var(--blu-300); font: 500 12px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; transition: fill var(--t-base); }
.layers-svg .layer-num { fill: var(--arancio); }
.layers-svg .layer-core-label { fill: var(--ink); font: 600 15px var(--font-sans); letter-spacing: -.01em; text-transform: none; }
.layers-svg .layer { outline: none; }
.layers-svg .layer:hover path, .layers-svg .layer:focus-visible path { stroke: var(--arancio); }
.layers-svg .layer:hover text, .layers-svg .layer:focus-visible text { fill: #fff; }
.layers-svg .layer--core:hover .layer-core, .layers-svg .layer--core:focus-visible .layer-core { fill: #F48D66; }
.layers-svg .layer--core:hover text, .layers-svg .layer--core:focus-visible text { fill: var(--ink); }
.layers-svg .layer:focus-visible path { stroke-width: 3; }
@media (max-width: 1023.98px) {
  .layers { justify-self: start; max-width: 420px; }
}
@media (max-width: 640px) {
  .layers-svg text { font-size: 15px; }
  .layers-svg .layer-core-label { font-size: 18px; }
}

/* Ciclo di lavoro: base della hero */
.hero-scope {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-5);
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-scope li { display: grid; gap: .3rem; align-content: start; }
.hero-scope .mono { color: var(--arancio); margin-bottom: .2rem; }
.hero-scope strong { color: #fff; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.hero-scope li > span:last-child { color: var(--blu-300); font-size: var(--fs-small); line-height: 1.45; }
@media (min-width: 900px) {
  .hero-scope { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
  .hero-scope li + li { padding-left: var(--s-5); border-left: 1px solid rgba(255,255,255,.1); }
}

/* Intro */
.intro-head { margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); }
.intro-statement { font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3.15rem); line-height: 1.12; letter-spacing: var(--tracking-display); max-width: 22em; }
.intro-statement .tone { color: var(--blu-400); }
.intro-body { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) {
  .intro-body { grid-template-columns: 4fr 8fr; gap: var(--s-8); align-items: start; }
}
.audiences { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .audiences { grid-template-columns: 1fr 1fr; gap: 0; } }
.audience { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-5); border-top: 2px solid var(--ink); }
@media (min-width: 720px) {
  .audience { padding: var(--s-5) var(--s-6) 0; }
  .audience + .audience { border-left: 1px solid var(--line); }
  .audience:first-child { padding-left: 0; }
}
.audience-label { color: var(--arancio-700); }
.audience-title { font-size: var(--fs-h3); }
.audience p:not(.audience-label) { color: var(--muted); }
.audience .link-arrow { margin-top: auto; padding-top: var(--s-3); align-self: flex-start; }

/* Servizi: esploratore per famiglie */
.services { background: var(--surface-alt); }
.families { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.family-tab {
  position: relative; display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; column-gap: var(--s-3);
  width: 100%; padding: var(--s-5) var(--s-2) var(--s-5) 0; text-align: left;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--t-fast);
}
.family-num { color: var(--muted); grid-row: span 2; }
.family-name { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 600; letter-spacing: var(--tracking-head); color: var(--ink); line-height: 1.2; }
.family-short { grid-column: 2; font-size: var(--fs-small); color: var(--muted); }
.family-tab::after { /* indicatore D */
  content: ""; position: absolute; left: -1px; top: 50%; width: 0; height: 14px; margin-top: -7px;
  background: var(--arancio); border-radius: 0 999px 999px 0; transition: width var(--t-base) var(--ease-out);
}
.family-tab:hover .family-name { color: var(--arancio-700); }
.family-tab[aria-expanded="true"] .family-num { color: var(--arancio-700); }

.family-panel { padding: var(--s-6) 0 var(--s-7); display: grid; gap: var(--s-4); align-content: start; }
.family-kicker { color: var(--arancio-700); }
.family-title { font-size: var(--fs-h3); line-height: 1.2; max-width: 26em; }
.family-panel > p:not(.family-kicker) { color: var(--muted); max-width: 40rem; }
.family-list { display: grid; gap: var(--s-2) var(--s-6); margin-block: var(--s-3) var(--s-4); }
.family-list li { display: flex; gap: var(--s-3); color: var(--ink); font-weight: 500; }
@media (min-width: 600px) { .family-list { grid-template-columns: 1fr 1fr; } }

/* Con JS: tab a sinistra, pannello a destra (desktop); fisarmonica su mobile */
.js .family-panel[hidden] { display: none; }
@media (min-width: 1024px) {
  .js .families { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); border-top: 0; }
  .js .family-tab { grid-column: 1; padding-left: var(--s-5); transition: color var(--t-fast), padding-left var(--t-base) var(--ease-out); }
  .js .family-tab:first-of-type { border-top: 1px solid var(--line-strong); }
  .js .family-tab[aria-expanded="true"] { padding-left: var(--s-6); }
  .js .family-tab[aria-expanded="true"]::after { width: 12px; }
  .js .family-tab:nth-of-type(1) { grid-row: 1; }
  .js .family-tab:nth-of-type(2) { grid-row: 2; }
  .js .family-tab:nth-of-type(3) { grid-row: 3; }
  .js .family-tab:nth-of-type(4) { grid-row: 4; }
  .js .family-tab:nth-of-type(5) { grid-row: 5; }
  .js .family-panel {
    grid-column: 2; grid-row: 1 / span 6; padding: clamp(2rem, 1rem + 2.5vw, 3.25rem);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  }
  .js .family-panel:not([hidden]) { animation: panel-in var(--t-slow) var(--ease-out); }
}
@media (max-width: 1023.98px) {
  .js .family-tab { padding-right: 2.5rem; }
  .js .family-tab::before { content: "+"; position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--arancio-700); transition: transform var(--t-base); }
  .js .family-tab[aria-expanded="true"]::before { transform: translateY(-50%) rotate(45deg); }
  .js .family-tab[aria-expanded="true"] { border-bottom-color: transparent; }
  .js .family-panel { border-bottom: 1px solid var(--line-strong); padding-top: 0; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.consulting-band {
  display: grid; gap: var(--s-2) var(--s-6); align-items: center; margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6); text-decoration: none; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s) 999px 999px var(--radius-s);
  transition: background-color var(--t-base), border-color var(--t-base);
}
.consulting-label { color: var(--arancio-700); }
.consulting-title { font-size: 1.375rem; font-weight: 600; letter-spacing: var(--tracking-head); }
.consulting-text { color: var(--muted); font-size: var(--fs-small); }
.consulting-arrow { display: none; }
.consulting-band:hover { background: #fff; border-color: var(--ink); }
@media (min-width: 900px) {
  .consulting-band { grid-template-columns: auto auto 1fr auto; padding-right: var(--s-7); }
  .consulting-arrow { display: block; }
  .consulting-band:hover .arrow { transform: translateX(4px); }
  .consulting-arrow .arrow { transition: transform var(--t-base) var(--ease-out); }
}

/* Approccio */
.approach { background: var(--blu); color: var(--blu-200); }
.approach h2, .approach h3, .approach h4 { color: #fff; }
.approach .section-intro { color: var(--blu-300); }
.compare { border-top: 1px solid rgba(255,255,255,.18); }
.compare-head, .compare-row { display: grid; gap: var(--s-2) var(--s-6); padding-block: var(--s-4); border-bottom: 1px solid rgba(255,255,255,.1); }
.compare-head { color: var(--blu-400); padding-block: var(--s-3); }
.compare-head span:first-child { display: none; }
.compare-topic { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arancio); padding-top: .3rem; }
.compare-a { color: var(--blu-300); }
.compare-b { display: flex; gap: var(--s-3); color: #fff; font-weight: 500; }
@media (max-width: 767.98px) {
  .compare-head { display: none; }
  .compare-a::before { content: "Reattivo — "; color: var(--blu-400); }
}
@media (min-width: 768px) {
  .compare-head, .compare-row { grid-template-columns: 9rem 1fr 1fr; padding-block: var(--s-5); }
  .compare-head span:first-child { display: block; }
  .compare-b { position: relative; }
}

.method { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.method-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); max-width: 40rem; }
.method-head p { color: var(--blu-300); }
.method-steps { display: grid; gap: var(--s-5); counter-reset: step; }
.method-step { position: relative; padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.25); }
.method-step--loop { border-top: 2px solid var(--arancio); }
.method-num { display: block; color: var(--blu-400); margin-bottom: var(--s-3); }
.method-step--loop .method-num { color: var(--arancio); }
.method-step h4 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.method-step p { font-size: var(--fs-small); color: var(--blu-300); }
.method-loop { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); color: var(--arancio); }
.method-loop-line { flex: 1; height: 18px; border: 1.5px solid var(--arancio); border-top: 0; border-radius: 0 0 999px 999px; max-width: 100%; }
@media (min-width: 900px) {
  .method-steps { grid-template-columns: repeat(5, 1fr); gap: var(--s-5); }
  .method-loop { margin-left: calc(60% + var(--s-5) * .4); }
}

/* Tecnologie */
.tech-grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .tech-grid { grid-template-columns: 5fr 7fr; gap: var(--s-9); } }
.tech-intro .h2 { margin-bottom: var(--s-5); }
.tech-intro > p:not(.eyebrow):not(.placeholder-note) { color: var(--muted); margin-bottom: var(--s-5); max-width: 32rem; }
.tech-list { border-top: 2px solid var(--ink); }
.tech-row {
  display: grid; grid-template-columns: 1fr; gap: var(--s-1) var(--s-5); align-items: baseline;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.tech-area { color: var(--muted); }
.tech-vendors { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 600; color: var(--ink); letter-spacing: var(--tracking-head); }
.tech-vendors i { font-style: normal; color: var(--arancio); margin-inline: .3em; }
.tech-link { font-size: var(--fs-small); color: var(--muted); text-underline-offset: 3px; }
.tech-link:hover { color: var(--ink); }
@media (min-width: 640px) {
  .tech-row { grid-template-columns: 13rem 1fr auto; }
}

/* Progetti */
.projects { background: var(--surface-alt); }
.cases { display: grid; gap: var(--s-5); }
@media (min-width: 960px) {
  .cases { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; }
  .case--featured { grid-row: span 2; }
}
.case-link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  transition: border-color var(--t-base), transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.case-link:hover { border-color: var(--ink); }
.case-visual { background: var(--blu); padding: var(--s-6); border-radius: var(--radius-s) var(--radius-s) 0 0; }
.case-diagram { width: 100%; max-width: 440px; margin: 0 auto; }
.case-diagram rect { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.case-diagram text { fill: #fff; font: 600 15px var(--font-sans); }
.case-diagram .case-small { fill: var(--blu-300); font: 500 11px var(--font-mono); letter-spacing: .04em; }
.case-link-line { stroke: var(--arancio); stroke-width: 2; stroke-dasharray: 6 6; fill: none; }
.case-node { fill: var(--arancio); }
@media (prefers-reduced-motion: no-preference) {
  .case-link-line { animation: dash 1.6s linear infinite; animation-play-state: paused; }
  .case-link:hover .case-link-line { animation-play-state: running; }
}
@keyframes dash { to { stroke-dashoffset: -24; } }
.case-body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); flex: 1; }
.case-meta { color: var(--muted); text-transform: none; letter-spacing: .02em; }
.case-title { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); line-height: 1.22; }
.case--featured .case-title { font-size: var(--fs-h3); }
.case-excerpt { color: var(--muted); font-size: var(--fs-small); }
.case-facts { display: grid; gap: var(--s-3); padding-top: var(--s-2); }
.case-facts div { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--line); }
@media (min-width: 600px) { .case-facts div { grid-template-columns: 7.5rem 1fr; } }
.case-facts dt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--arancio-700); padding-top: .2rem; }
.case-facts dd { font-size: var(--fs-small); color: var(--text); }
.case-body .link-arrow { margin-top: auto; align-self: flex-start; }

/* Azienda */
.company-grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .company-grid { grid-template-columns: 5fr 7fr; gap: var(--s-9); } }
.photo-placeholder {
  position: relative; display: grid; place-items: center; gap: var(--s-4); aspect-ratio: 4 / 5; max-height: 640px; width: 100%;
  background: var(--blu-100); border-radius: var(--radius-s) 999px 999px var(--radius-s); color: var(--blu-600); text-align: center;
  overflow: hidden;
}
@media (max-width: 959.98px) { .photo-placeholder { aspect-ratio: 16 / 10; border-radius: var(--radius-s) 200px 200px var(--radius-s); } }
.photo-placeholder img { width: 96px; opacity: .5; align-self: end; }
.photo-placeholder span { align-self: start; line-height: 1.6; }
.company-copy .h2 { margin-bottom: var(--s-5); }
.company-copy .lead { margin-bottom: var(--s-4); }
.company-copy > p:not(.lead):not(.eyebrow) { color: var(--muted); }
.company-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-6); margin-top: var(--s-6); border-top: 1px solid var(--line); }
.company-facts div { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.company-facts dt { color: var(--muted); margin-bottom: var(--s-1); }
.company-facts dd { font-weight: 600; color: var(--ink); }
.company-links { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-6); }
@media (max-width: 480px) { .company-facts { grid-template-columns: 1fr; } }

/* Approfondimenti */
.news { border-top: 1px solid var(--line); }
.news-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-5); margin-bottom: var(--s-6); }
.news-head .h2 { max-width: 16em; }
.articles { display: grid; gap: var(--s-7) var(--s-5); }
@media (min-width: 760px) { .articles { grid-template-columns: repeat(3, 1fr); } }
/* Su smartphone l'anteprima mostra due articoli: l'archivio completo è a un tocco ("Tutti gli articoli") */
@media (max-width: 759.98px) { .articles .article:nth-child(n+3) { display: none; } }
.article-link { display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; color: inherit; }
.article-cover {
  position: relative; aspect-ratio: 2 / 1; margin-bottom: var(--s-2); overflow: hidden;
  display: flex; align-items: flex-end; padding: var(--s-4); border-radius: var(--radius-s);
}
.article-cover::after { /* forma D, varia per categoria */
  content: ""; position: absolute; top: 18%; right: -8%; width: 55%; height: 64%;
  border-radius: 0 999px 999px 0; transition: transform var(--t-slow) var(--ease-out);
}
.article-link:hover .article-cover::after { transform: translateX(-6%); }
.article-cover--a { background: var(--blu); color: #fff; }
.article-cover--a::after { background: var(--arancio); }
.article-cover--b { background: var(--blu-100); color: var(--ink); }
.article-cover--b::after { border: 2px solid var(--blu); border-left: 0; }
.article-cover--c { background: var(--arancio); color: var(--ink); }
.article-cover--c::after { background: var(--blu); }
.article-meta { display: flex; justify-content: space-between; color: var(--muted); }
.article-meta span:first-child { color: var(--arancio-700); }
.article-title { font-size: 1.25rem; line-height: 1.28; transition: color var(--t-fast); }
.article-link:hover .article-title { color: var(--arancio-700); }
.article-excerpt { color: var(--muted); font-size: var(--fs-small); }

/* Contatto finale */
.cta { background: var(--arancio); color: var(--ink); padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); overflow: hidden; }
.cta :focus-visible { outline-color: var(--ink); }
.cta-grid { display: grid; gap: var(--s-7); align-items: end; }
@media (min-width: 1024px) { .cta-grid { grid-template-columns: 8fr 4fr; gap: var(--s-8); } }
.cta-payoff {
  font-size: clamp(3rem, 1.2rem + 7.8vw, 8.25rem); font-weight: 700; line-height: .9; letter-spacing: -0.045em;
  color: var(--ink); margin-bottom: var(--s-6); white-space: nowrap; font-stretch: 85%;
}
.cta-title { font-size: var(--fs-h3); margin-bottom: var(--s-3); max-width: 24em; }
.cta-copy > p:not(.cta-payoff) { max-width: 36rem; color: var(--ink); }
.cta-actions { display: grid; gap: var(--s-3); }
.cta-actions .btn { justify-self: start; margin-bottom: var(--s-3); }
.cta-contact { display: grid; gap: .1rem; padding-top: var(--s-3); border-top: 1px solid rgba(22,37,46,.25); font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.cta-contact .mono { font-size: .6875rem; opacity: .8; }
.cta-contact:hover { text-decoration: underline; text-underline-offset: 4px; }

/* PAGINA SERVIZI ---------------------------------------------------------- */
/* Hero */
.svc-hero {
  background: var(--blu); color: #fff;
  padding-top: calc(var(--header-h) + clamp(2.25rem, 1rem + 3.5vw, 4.5rem));
  padding-bottom: clamp(2rem, 1.25rem + 2vw, 3rem);
}
.breadcrumb { display: flex; gap: .6rem; margin-bottom: var(--s-6); color: var(--blu-400); }
.breadcrumb a { color: var(--blu-200); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: #fff; }
.svc-hero-grid { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 1024px) { .svc-hero-grid { grid-template-columns: 7fr 5fr; gap: var(--s-8); } }
.svc-hero-title { color: #fff; font-size: clamp(2.2rem, 1.3rem + 3.3vw, 4.1rem); line-height: 1.04; letter-spacing: var(--tracking-display); max-width: 15em; }
.svc-hero-title .dot { color: var(--arancio); }
.svc-hero-lead { color: var(--blu-200); font-size: var(--fs-lead); line-height: 1.5; }

.svc-index {
  display: grid; grid-template-columns: 1fr; margin-top: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);
  border-top: 1px solid rgba(255,255,255,.16);
}
.svc-index a {
  position: relative; display: grid; gap: .2rem; height: 100%; padding: var(--s-4) var(--s-6) var(--s-4) 0;
  color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1);
}
.svc-index .mono { color: var(--arancio); }
.svc-index strong { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -.01em; transition: color var(--t-fast); }
.svc-index a > span:last-child { color: var(--blu-300); font-size: var(--fs-xs); }
.svc-index a::after { /* freccia verso il basso: porta alla sezione */
  content: "↓"; position: absolute; right: var(--s-3); top: var(--s-4); color: var(--blu-400);
  transition: transform var(--t-base) var(--ease-out), color var(--t-fast);
}
.svc-index a:hover strong { color: var(--arancio); }
.svc-index a:hover::after { color: var(--arancio); transform: translateY(3px); }
.svc-index-cross .mono { color: var(--blu-300); }
@media (min-width: 560px) { .svc-index { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-6); } }
@media (min-width: 900px) { .svc-index { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) {
  .svc-index { grid-template-columns: repeat(6, 1fr); column-gap: 0; }
  .svc-index a { border-bottom: 0; padding: var(--s-5) var(--s-5) var(--s-2); }
  .svc-index li + li a { border-left: 1px solid rgba(255,255,255,.1); }
  .svc-index li:first-child a { padding-left: 0; }
  .svc-index-cross a { background: rgba(255,255,255,.04); }
  .svc-index a::after { top: var(--s-5); }
}

/* Due ruoli */
.svc-roles { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.roles { display: grid; gap: var(--s-5); }
.role { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.role-label { color: var(--arancio-700); }
.role-title { font-size: var(--fs-h3); }
.role p:not(.role-label) { color: var(--muted); max-width: 34rem; }
@media (min-width: 760px) {
  .roles { grid-template-columns: 1fr 1fr; gap: 0; }
  .role + .role { padding-left: var(--s-7); border-left: 1px solid var(--line); }
  .role:first-child { padding-right: var(--s-7); }
}
.roles-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-6); font-size: var(--fs-small); color: var(--muted); }

/* Indicatore di ruolo (Progetto / Gestione) */
.svc-modes { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-5); }
.mode {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem .3rem .55rem;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blu-400); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-xs) 999px 999px var(--radius-xs);
}
.mode::before { content: ""; width: 8px; height: 6px; border-radius: 0 999px 999px 0; background: currentColor; opacity: .35; }
.mode--on { color: var(--ink); border-style: solid; border-color: var(--ink); }
.mode--on::before { background: var(--arancio); opacity: 1; }

/* Navigazione interna (sticky + evidenziazione della sezione corrente) */
.svc-subnav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255,255,255,.96); border-block: 1px solid var(--line);
}
@supports (backdrop-filter: blur(10px)) { .svc-subnav { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(14px); } }
.svc-subnav ul { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--s-3)); }
.svc-subnav ul::-webkit-scrollbar { display: none; }
.svc-subnav a {
  position: relative; display: block; padding: 1rem .85rem; white-space: nowrap;
  font-size: .9375rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color var(--t-fast);
}
.svc-subnav a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: -1px; height: 2px; background: var(--arancio);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease-out);
}
.svc-subnav a:hover { color: var(--ink); }
.svc-subnav a.is-active { color: var(--ink); }
.svc-subnav a.is-active::after { transform: none; }
/* si somma allo scroll-padding dell'html (altezza header): qui basta l'altezza della barra interna */
.page-servizi [id] { scroll-margin-top: 60px; }

/* Struttura comune delle aree */
.svc { padding-block: var(--section-y); }
.svc-split { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) { .svc-split { grid-template-columns: 5fr 7fr; gap: var(--s-9); } }
@media (min-width: 1024px) { .svc-head--sticky { position: sticky; top: calc(var(--header-h) + 96px); } }
.svc-num { color: var(--arancio-700); margin-bottom: var(--s-4); }
.svc-title { font-size: var(--fs-h2); letter-spacing: var(--tracking-display); line-height: 1.04; }
.svc-claim { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; color: var(--ink); max-width: 30em; }
.svc-intro { margin-top: var(--s-4); color: var(--muted); max-width: 38rem; }
.svc-head--wide { display: grid; gap: var(--s-2); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.svc-head--wide .svc-modes { margin-bottom: 0; }
@media (min-width: 1024px) { .svc-head--wide { grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: end; } }

/* Ambito (livello 2) + attività in prosa (livello 3): componente comune a tutte le aree */
.area { display: grid; gap: var(--s-3); align-content: start; }
.area-head { display: flex; align-items: baseline; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
.area-label { color: var(--arancio-700); }
.area-title { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.25; }
.area-scope { color: var(--arancio-700); text-transform: none; letter-spacing: .02em; font-size: .75rem; line-height: 1.6; }
.area-text { color: var(--text); line-height: 1.65; max-width: 40rem; }
.area .svc-modes { margin-block: var(--s-2) 0; }

/* 01 Managed Services: ambiti impilati accanto all'intestazione fissa */
.areas { display: grid; gap: var(--s-7); }

/* 02 Cybersecurity: tre ambiti in colonna */
.svc--cyber { background: var(--blu); color: var(--blu-200); }
.svc--cyber h2, .svc--cyber h3, .svc--cyber .svc-claim { color: #fff; }
.svc--cyber .svc-num, .svc--cyber .area-label, .svc--cyber .area-scope { color: var(--arancio); }
.svc--cyber .svc-intro { color: var(--blu-300); }
.svc--cyber .area-head { border-bottom-color: rgba(255,255,255,.55); }
.svc--cyber .area-text { color: var(--blu-200); }
.svc--cyber .mode, .svc--consulting .mode { color: var(--blu-400); border-color: rgba(255,255,255,.25); }
.svc--cyber .mode--on, .svc--consulting .mode--on { color: #fff; border-color: rgba(255,255,255,.6); }
.cyber-grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .cyber-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }

/* 03 Infrastrutture & Networking */
.infra-grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .infra-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.flow-label { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); margin-bottom: var(--s-4); color: var(--muted); }
.flow { display: grid; gap: var(--s-3); }
.flow li { display: flex; align-items: baseline; gap: var(--s-3); padding-top: var(--s-3); border-top: 2px solid var(--line-strong); font-weight: 600; color: var(--ink); }
.flow .mono { color: var(--muted); }
.flow-end { border-top-color: var(--arancio) !important; }
.flow-end .mono { color: var(--arancio-700) !important; }
@media (min-width: 760px) {
  .flow { grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }
  .flow li { flex-direction: column; gap: var(--s-2); }
}

/* 04 Cloud & Microsoft 365: righe ambito, con le piattaforme come riferimento dell'ambito */
.svc--cloud { background: var(--surface-alt); }
.cloud-rows { border-top: 2px solid var(--ink); }
.cloud-row { padding-block: var(--s-6); border-bottom: 1px solid var(--line-strong); gap: var(--s-4); }
.cloud-row .area-head { border-bottom: 0; padding-bottom: 0; }
.cloud-row-head { display: grid; gap: var(--s-3); align-content: start; }
.platform-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.platform-tags span {
  padding: .2rem .6rem; font-family: var(--font-mono); font-size: .75rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-xs) 999px 999px var(--radius-xs);
}
@media (min-width: 900px) {
  .cloud-row { grid-template-columns: 5fr 7fr; column-gap: var(--s-9); align-items: start; }
  .cloud-row .area-text { padding-top: .2rem; }
}

/* 05 Backup & Disaster Recovery: ambiti protetti, poi controllo e continuità separati */
.protect-grid { display: grid; gap: var(--s-3); }
@media (min-width: 760px) { .protect-grid { grid-template-columns: 1fr 1fr 1.25fr; } }
.protect { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); background: var(--surface-alt); border-radius: var(--radius-s); }
.protect-title { font-size: 1.25rem; }
.protect p:not(.protect-label) { color: var(--muted); font-size: var(--fs-small); }
.protect--cloud { background: var(--blu); border-radius: var(--radius-s) 120px 120px var(--radius-s); padding-right: var(--s-8); }
.protect--cloud .protect-title { color: #fff; }
.protect--cloud p:not(.protect-label) { color: var(--blu-200); }
.protect-label { color: var(--arancio); }
.backup-ops { display: grid; gap: var(--s-7); margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
@media (min-width: 900px) { .backup-ops { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

/* Consulenza IT (trasversale) */
.svc--consulting { background: var(--blu-900); color: var(--blu-200); }
.svc--consulting h2, .svc--consulting .svc-claim { color: #fff; }
.svc--consulting .svc-num { color: var(--blu-300); }
.svc--consulting .svc-intro { color: var(--blu-300); }
.svc--consulting .btn { margin-top: var(--s-6); }
.consult-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) { .consult-grid { grid-template-columns: 5fr 7fr; gap: var(--s-9); } }
.consult-list { border-top: 1px solid rgba(255,255,255,.22); }
.consult-list li { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.consult-list strong { color: #fff; font-weight: 600; }
.consult-list span { color: var(--blu-300); font-size: var(--fs-small); }
@media (min-width: 640px) { .consult-list li { grid-template-columns: 16rem 1fr; gap: var(--s-5); align-items: baseline; } }

/* Collegamenti diretti (dal mega menu): evidenzia la voce raggiunta */
.page-servizi .area:target .area-head, .page-servizi .area-scope span:target, .page-servizi .area-title:target,
.page-servizi .platform-tags span:target, .page-servizi .protect:target { animation: target-flash 2.4s ease-out; }
@keyframes target-flash { 0%, 35% { background-color: rgba(239,119,74,.16); } 100% { background-color: transparent; } }

/* PAGINA TECNOLOGIE --------------------------------------------------------- */
.tech-hero { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }

/* Come scegliamo le tecnologie */
.tech-intro-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) { .tech-intro-grid { grid-template-columns: 5fr 7fr; gap: var(--s-9); } }
.tech-intro-copy > p + p { margin-top: var(--s-4); }
.tech-intro-copy > p:not(.lead) { color: var(--muted); }
.principles { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 640px) { .principles { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.principle { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.principle-label { color: var(--arancio-700); }
.principle h3 { font-size: 1.25rem; }
.principle p:not(.principle-label) { color: var(--muted); font-size: var(--fs-small); }

/* Produttori: griglia unica di marchi, solo loghi (approvata) */
.tech-brands { background: var(--surface-alt); }
.tech-brands-head { margin-bottom: var(--s-6); }

.logo-grid {
  --logo-scale: .8;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden;
}
/* su 2 colonne, con un numero dispari di marchi l'ultimo occupa la riga intera (niente cella vuota) */
@media (max-width: 759.98px) { .logo-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 760px) { .logo-grid { --logo-scale: .9; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .logo-grid { --logo-scale: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.logo-tile {
  display: grid; place-items: center;
  min-height: clamp(112px, 6vw + 84px, 160px); padding: var(--s-5) var(--s-4);
  background: #fff;
}
.logo-tile img { width: calc(var(--w) * var(--logo-scale)); height: auto; max-width: 100%; }
.logo-placeholder { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.logo-placeholder-name { font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.logo-placeholder-tag { padding: .15rem .45rem; font-size: .625rem; color: var(--arancio-700); border: 1px dashed var(--arancio-200); background: var(--arancio-50); }
.tech-note { margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--muted); max-width: 52rem; }

/* APPROFONDIMENTI ----------------------------------------------------------- */
/* Copertine astratte aggiuntive (forme D, nessuna immagine) */
.article-cover--d { background: var(--blu-900); color: #fff; }
.article-cover--d::after { border: 2px solid var(--arancio); border-left: 0; }
.article-cover--e { background: var(--blu-50); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.article-cover--e::after { background: var(--blu); width: 38%; height: 44%; top: 28%; }
.articles--two { gap: var(--s-6); }
@media (min-width: 760px) { .articles--two { grid-template-columns: repeat(2, 1fr); } }

/* Archivio */
.archive-hero { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.archive .demo-banner { margin-bottom: var(--s-6); }
.feature-link { display: grid; gap: var(--s-5); text-decoration: none; color: inherit; }
@media (min-width: 900px) { .feature-link { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: center; } }
.feature-cover { aspect-ratio: 16 / 9; margin: 0; }
.feature-body { display: grid; gap: var(--s-4); align-content: center; }
.feature-title { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--tracking-display); transition: color var(--t-fast); }
.feature-excerpt { color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }
.feature-link:hover .feature-title { color: var(--arancio-700); }
.feature-body .link-arrow { justify-self: start; }
.archive-list { margin-top: clamp(3rem, 2rem + 3vw, 5rem); border-top: 2px solid var(--ink); }
.archive-row a { display: grid; gap: var(--s-2); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.archive-cat { color: var(--arancio-700); padding-top: .35rem; }
.archive-main { display: grid; gap: var(--s-2); }
.archive-title { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; color: var(--ink); letter-spacing: var(--tracking-head); line-height: 1.25; transition: color var(--t-fast); }
.archive-excerpt { color: var(--muted); font-size: var(--fs-small); max-width: 44rem; }
.archive-meta { color: var(--muted); text-transform: none; letter-spacing: .02em; padding-top: .35rem; }
.archive-row a:hover .archive-title { color: var(--arancio-700); }
@media (min-width: 900px) { .archive-row a { grid-template-columns: 11rem 1fr 10rem; gap: var(--s-6); align-items: start; } .archive-meta { text-align: right; } }
.archive-empty { color: var(--muted); font-size: var(--fs-lead); }

/* Articolo */
.post-hero {
  background: var(--blu); color: #fff;
  padding-top: calc(var(--header-h) + clamp(2.25rem, 1rem + 3.5vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.post-hero-grid { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 1024px) { .post-hero-grid { grid-template-columns: 8fr 4fr; gap: var(--s-8); } }
.post-cat { color: var(--arancio); margin-bottom: var(--s-4); }
.post-title { color: #fff; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); line-height: 1.06; letter-spacing: var(--tracking-display); max-width: 18em; }
.post-lead { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.5; color: var(--blu-200); max-width: 40rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); color: var(--blu-300); text-transform: none; letter-spacing: .02em; }
.post-meta span + span::before { content: "·"; margin-right: var(--s-5); color: var(--blu-400); }
.post-cover { aspect-ratio: 4 / 3; margin: 0; }
@media (max-width: 1023.98px) { .post-cover { display: none; } }

.post-section { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.post-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .post-grid { grid-template-columns: 3fr 8fr; gap: var(--s-9); align-items: start; } }
.post-toc { padding: var(--s-4) 0; border-top: 2px solid var(--ink); }
.post-toc-title { color: var(--muted); margin-bottom: var(--s-3); }
.post-toc ol { display: grid; gap: var(--s-2); counter-reset: toc; }
.post-toc li { counter-increment: toc; display: grid; grid-template-columns: 1.8rem 1fr; font-size: var(--fs-small); line-height: 1.4; }
.post-toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--arancio-700); padding-top: .15rem; }
.post-toc a { color: var(--text); text-decoration: none; }
.post-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .post-aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); } }
.post-main { min-width: 0; max-width: 46rem; }

/* Tipografia di lettura */
.prose { font-size: 1.0625rem; line-height: 1.75; color: var(--text); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); line-height: 1.2; margin-top: 2.2em; scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; }
.prose p:first-child { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--arancio); text-underline-offset: 3px; }
.prose ul > li, .prose ol > li { position: relative; padding-left: 1.6em; }
.prose ul > li + li, .prose ol > li + li { margin-top: .55em; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 7px; background: var(--arancio); border-radius: 0 999px 999px 0; }
.prose ol { counter-reset: item; }
.prose ol > li { counter-increment: item; }
.prose ol > li::before { content: counter(item) "."; position: absolute; left: 0; font-family: var(--font-mono); font-size: .875em; color: var(--arancio-700); font-weight: 500; }
.prose ol.steps > li { padding: var(--s-4) 0 var(--s-4) 2.6em; border-top: 1px solid var(--line); margin: 0; }
.prose ol.steps > li:last-child { border-bottom: 1px solid var(--line); }
.prose ol.steps > li::before { content: counter(item, decimal-leading-zero); top: var(--s-4); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.prose th { text-align: left; font-weight: 600; color: var(--ink); background: var(--blu-50); padding: .75rem 1rem; border-bottom: 1px solid var(--line-strong); }
.prose td { padding: .75rem 1rem; border-top: 1px solid var(--line); vertical-align: top; }
.prose td .muted { font-size: .8125rem; }
/* Su smartphone le righe delle tabelle diventano schede: etichetta di colonna + valore */
@media (max-width: 639.98px) {
  .prose table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose table tr { display: block; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
  .prose table tr:first-child { border-top: 0; }
  .prose table td { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); padding: .35rem 0; border: 0; }
  .prose table td::before { content: attr(data-label); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: .2rem; }
  .callout { padding: var(--s-4); }
}
.callout { padding: var(--s-5); background: var(--surface-alt); border-left: 3px solid var(--arancio); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.callout > * + * { margin-top: .8em; }
.callout-label { color: var(--arancio-700); }
.callout .table-wrap { margin-top: var(--s-3); }

.review-box { margin-bottom: var(--s-7); padding: var(--s-5); font-size: var(--fs-small); background: var(--arancio-50); border: 1px dashed var(--arancio-200); border-radius: var(--radius-s); }
.review-box ul { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.review-box li { position: relative; padding-left: 1.2em; }
.review-box li::before { content: "–"; position: absolute; left: 0; color: var(--arancio-700); }
.article-sources { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.article-sources h2 { color: var(--muted); font-size: var(--fs-mono); margin-bottom: var(--s-3); letter-spacing: var(--tracking-mono); }
.article-sources ul { display: grid; gap: var(--s-2); }
.article-sources a { font-size: var(--fs-small); color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-sources a:hover { color: var(--ink); text-decoration-color: var(--arancio); }
.post-service { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-7); padding: var(--s-5) var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--radius-s) 999px 999px var(--radius-s); }
.post-service .mono { color: var(--muted); }
.post-related { background: var(--surface-alt); }
.post-related .news-head { margin-bottom: var(--s-6); }

/* 7. PAGINE INTERNE ------------------------------------------------------ */
.page-hero {
  background: var(--blu); color: #fff;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5.5rem));
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.page-hero-title { color: #fff; font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.25rem); letter-spacing: var(--tracking-display); line-height: 1.04; max-width: 16em; }
.page-hero-lead { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--blu-200); max-width: 42rem; }

.stub { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .stub { grid-template-columns: 5fr 7fr; gap: var(--s-9); } }
.stub .h3 { margin-bottom: var(--s-3); }
.stub-list { border-top: 2px solid var(--ink); }
.stub-list li { display: flex; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink); }
.stub-back { margin-top: var(--s-8); }

/* Pagine legali (privacy, cookie) in attesa del testo definitivo */
.legal { display: grid; gap: var(--s-4); max-width: 44rem; }
.legal a { color: var(--ink); font-weight: 600; }
.legal-company { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }

/* Supporto */
.support-actions { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .support-actions { grid-template-columns: 1fr 1fr; } }
.tile { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; }
.tile--primary { background: var(--blu); border-color: var(--blu); color: var(--blu-200); }
.tile--primary h2, .tile--primary h3 { color: #fff; }
.tile-label { color: var(--arancio-700); }
.tile--primary .tile-label { color: var(--arancio); }
.tile h2 { font-size: var(--fs-h3); }
.tile p:not(.tile-label) { font-size: var(--fs-small); color: inherit; }
.tile:not(.tile--primary) p:not(.tile-label) { color: var(--muted); }
.tile-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); }
.tile-big { font-size: 1.375rem; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: var(--tracking-head); }
.tile-big:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Procedura di teleassistenza: stessa grammatica dei passi del metodo in homepage, su fondo chiaro */
.remote-howto { margin-top: var(--s-9); }
.remote-steps { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 760px) { .remote-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .remote-steps { grid-template-columns: repeat(4, 1fr); } }
.remote-step { padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.remote-num { display: block; color: var(--arancio-700); margin-bottom: var(--s-2); }
.remote-step h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.remote-step p { font-size: var(--fs-small); color: var(--muted); }
.remote-step a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.support-direct { display: grid; gap: var(--s-6); margin-top: var(--s-9); }
@media (min-width: 760px) { .support-direct { grid-template-columns: repeat(3, 1fr); } }

/* Contatti + form */
.contact-grid { display: grid; gap: var(--s-8); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 7fr 4fr; gap: var(--s-9); } }
.form { display: grid; gap: var(--s-5); }
.form-row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field label, .field legend { font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
.field .opt { font-weight: 400; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 160px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316252E' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--blu-600); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(239,119,74,.45); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--arancio-700); }
.field-error { font-size: var(--fs-xs); color: var(--arancio-700); font-weight: 600; }
.field-error:empty { display: none; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; font-size: var(--fs-small); color: var(--text); }
.check input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--blu); }
.form-status { padding: var(--s-4); border-left: 3px solid var(--arancio); background: var(--arancio-50); font-size: var(--fs-small); color: var(--ink); }
.form-status[hidden] { display: none; }
.contact-aside { display: grid; gap: var(--s-6); align-content: start; }
.contact-block { padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.contact-block .mono { color: var(--muted); display: block; margin-bottom: var(--s-2); }
.contact-block a { color: var(--ink); font-weight: 600; }
.contact-block address { font-style: normal; color: var(--ink); }
.contact-block .link-arrow { margin-top: var(--s-2); font-size: var(--fs-small); }
.contact-note { font-size: var(--fs-xs); color: var(--muted); }
.h3 + .contact-note { margin-top: var(--s-2); }

/* 8. FOOTER -------------------------------------------------------------- */
.site-footer { background: var(--blu-900); color: var(--blu-300); padding-top: clamp(4rem, 3rem + 3vw, 6rem); font-size: var(--fs-small); }
.footer-top { display: grid; gap: var(--s-7); padding-bottom: var(--s-8); }
@media (min-width: 1024px) { .footer-top { grid-template-columns: 4fr 8fr; gap: var(--s-8); } }
.footer-brand img { width: 176px; margin-bottom: var(--s-5); }
.footer-brand p { max-width: 22rem; }
.footer-payoff { margin-top: var(--s-5); font-weight: 700; font-size: 1.125rem; letter-spacing: .02em; color: #fff; }
.footer-payoff span { color: var(--arancio); }
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-5); }
@media (min-width: 760px) { .footer-nav { grid-template-columns: repeat(4, 1fr); } }
.footer-title { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--arancio); margin-bottom: var(--s-4); }
.footer-col li + li { margin-top: var(--s-2); }
.footer-col a { color: var(--blu-200); text-decoration: none; overflow-wrap: anywhere; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-col address { line-height: 1.8; color: var(--blu-200); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-block: var(--s-5); border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-xs); color: var(--blu-400); }
.footer-legal { display: flex; gap: var(--s-5); }
.footer-legal a { color: var(--blu-300); }
.footer-legal a:hover { color: #fff; }

/* 9. MOVIMENTO ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Il contenuto non viene mai nascosto in attesa dello scroll (stampa, screenshot a pagina intera,
     crawler, JS lento): l'animazione parte solo all'ingresso, a partire da uno stato già visibile. */
  .js .reveal.is-in { animation: fade-up var(--t-slow) var(--ease-out) both; }
  .js .compare-row.reveal.is-in .compare-b::before { transform-origin: left; animation: grow-x var(--t-slow) var(--ease-out) .2s both; }

  .js .hero-title .line { animation: line-up .9s var(--ease-out) both; }
  .js .hero-title .line:nth-child(2) { animation-delay: .08s; }
  .js .hero-title .line:nth-child(3) { animation-delay: .16s; }
  .js .hero-lead, .js .hero-actions, .js .hero-client { animation: fade-up .9s var(--ease-out) .3s both; }
  .js .hero-scope { animation: fade-up .9s var(--ease-out) .5s both; }
  /* I perimetri si disegnano dal nucleo verso l'esterno, una sola volta */
  .js .layers-svg path[pathLength] { stroke-dasharray: 1 1.01; stroke-dashoffset: 1; animation: draw 1.2s var(--ease-in-out) calc(.3s + var(--i) * .13s) forwards; }
  .js .layers-svg text, .js .layers-svg .layer-core { animation: fade-in .7s ease calc(.55s + var(--i) * .13s) both; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes line-up { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}