/* spun.ai · generato da ai/src/build.py: non modificare a mano */
@layer tokens, base, illustrations, layout, components, utilities;
/* Font SPUN Beta (v2), self-hosted: niente CDN esterni.
   Instrument Sans e Space Mono sono sotto SIL Open Font License.
   Percorsi relativi: questo file va copiato insieme ai .woff2 della cartella. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-normal-latin.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-normal-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-italic-latin.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-italic-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@layer tokens {
/* Generato da packages/design-tokens/build.py a partire da tokens.json: non modificare a mano. */
:root {
  --sx-ink: #101013;
  --sx-ink-2: #1A1A1E;
  --sx-ink-3: #27272B;
  --sx-muted: #6D6D78;
  --sx-muted-2: #A1A1AA;
  --sx-paper: #FAFAF4;
  --sx-paper-2: #F5F4EF;
  --sx-paper-3: #EBE9E0;
  --sx-line-light: #E4E3DE;
  --sx-cobalt: #2348FF;
  --sx-cobalt-deep: #1C3AE6;
  --sx-cobalt-light: #4466FF;
  --sx-cobalt-darker: #152DBF;
  --sx-lime: #B6F36B;
  --sx-sky: #9EE7FF;
  --sx-coral: #FF6B4A;
  --sx-butter: #FFD64A;
  --sx-plum: #E9D5FF;
  --sx-field-host: #5F2CFF;
  --sx-field-host-ink: #DFF6FF;
  --sx-field-support: #4AECF7;
  --sx-field-support-ink: #180026;
  --sx-field-guru: #042F32;
  --sx-field-guru-ink: #D6FFCB;
  --sx-field-tel: #FF7700;
  --sx-field-tel-ink: #251D3A;
  --sx-field-pro: #3D007A;
  --sx-field-pro-ink: #E8ECF1;
  --sx-field-one: #404257;
  --sx-field-one-ink: #71D6F4;
  --sx-field-cloud: #DFF6FF;
  --sx-field-cloud-ink: #000D6B;
  --sx-field-menu: #CFFF74;
  --sx-field-menu-ink: #2F3A1D;
  --sx-field-market: #FFA000;
  --sx-field-market-ink: #360099;
  --sx-field-store: #99DDCC;
  --sx-field-store-ink: #000D6B;
  --sx-field-farm: #4C6800;
  --sx-field-farm-ink: #F1FFCC;
  --sx-field-club: #B03A10;
  --sx-field-club-ink: #FFF1E0;
  --sx-field-raas: #FFD11C;
  --sx-field-raas-ink: #1E033F;
  --sx-field-bio: #FFD8B8;
  --sx-field-bio-ink: #0038FF;
  --sx-field-social: #E851E3;
  --sx-field-social-ink: #24006B;
  --sx-field-studio: #D6BFFF;
  --sx-field-studio-ink: #360099;
  --sx-field-city: #0FB2EB;
  --sx-field-city-ink: #121B3B;
  --sx-field-zone: #AAFFB8;
  --sx-field-zone-ink: #250C75;
  --sx-field-video: #F50538;
  --sx-field-video-ink: #000000;
  --sx-field-life: #FF5DA2;
  --sx-field-life-ink: #000D6B;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --sx-font-weight-regular: 400;
  --sx-font-weight-medium: 500;
  --sx-font-weight-semibold: 600;
  --sx-font-tracking-label-min: 0.05em;
  --sx-font-tracking-label-max: 0.08em;
  --sx-type-display-family: var(--font-sans);
  --sx-type-display-size: 96px;
  --sx-type-display-lh: 96px;
  --sx-type-display-weight: 500;
  --sx-type-display-track: -0.035em;
  --sx-type-h1-family: var(--font-sans);
  --sx-type-h1-size: 72px;
  --sx-type-h1-lh: 72px;
  --sx-type-h1-weight: 500;
  --sx-type-h1-track: -0.02em;
  --sx-type-h2-family: var(--font-sans);
  --sx-type-h2-size: 56px;
  --sx-type-h2-lh: 60px;
  --sx-type-h2-weight: 500;
  --sx-type-h2-track: -0.01em;
  --sx-type-h3-family: var(--font-sans);
  --sx-type-h3-size: 44px;
  --sx-type-h3-lh: 52px;
  --sx-type-h3-weight: 500;
  --sx-type-h3-track: -0.01em;
  --sx-type-h4-family: var(--font-sans);
  --sx-type-h4-size: 32px;
  --sx-type-h4-lh: 40px;
  --sx-type-h4-weight: 500;
  --sx-type-h4-track: 0em;
  --sx-type-h5-family: var(--font-sans);
  --sx-type-h5-size: 24px;
  --sx-type-h5-lh: 32px;
  --sx-type-h5-weight: 500;
  --sx-type-h5-track: 0em;
  --sx-type-h6-family: var(--font-sans);
  --sx-type-h6-size: 16px;
  --sx-type-h6-lh: 24px;
  --sx-type-h6-weight: 500;
  --sx-type-h6-track: 0em;
  --sx-type-body-large-family: var(--font-sans);
  --sx-type-body-large-size: 20px;
  --sx-type-body-large-lh: 28px;
  --sx-type-body-large-weight: 400;
  --sx-type-body-large-track: -0.02em;
  --sx-type-body-family: var(--font-sans);
  --sx-type-body-size: 16px;
  --sx-type-body-lh: 24px;
  --sx-type-body-weight: 400;
  --sx-type-body-track: -0.01em;
  --sx-type-small-family: var(--font-sans);
  --sx-type-small-size: 13px;
  --sx-type-small-lh: 20px;
  --sx-type-small-weight: 400;
  --sx-type-small-track: 0em;
  --sx-type-button-large-family: var(--font-sans);
  --sx-type-button-large-size: 16px;
  --sx-type-button-large-lh: 24px;
  --sx-type-button-large-weight: 500;
  --sx-type-button-large-track: 0.01em;
  --sx-type-button-small-family: var(--font-sans);
  --sx-type-button-small-size: 14px;
  --sx-type-button-small-lh: 20px;
  --sx-type-button-small-weight: 500;
  --sx-type-button-small-track: 0.02em;
  --sx-type-eyebrow-family: var(--font-mono);
  --sx-type-eyebrow-size: 13px;
  --sx-type-eyebrow-lh: 20px;
  --sx-type-eyebrow-weight: 400;
  --sx-type-eyebrow-track: var(--sx-font-tracking-label-max);
  --sx-type-eyebrow-case: uppercase;
  --sx-type-chip-family: var(--font-mono);
  --sx-type-chip-size: 11px;
  --sx-type-chip-lh: 16px;
  --sx-type-chip-weight: 400;
  --sx-type-chip-track: var(--sx-font-tracking-label-min);
  --sx-type-chip-case: uppercase;
  --sx-space-1: 4px;
  --sx-space-2: 8px;
  --sx-space-3: 12px;
  --sx-space-4: 16px;
  --sx-space-5: 20px;
  --sx-space-6: 24px;
  --sx-space-8: 32px;
  --sx-space-10: 40px;
  --sx-space-12: 48px;
  --sx-space-16: 64px;
  --sx-space-20: 80px;
  --sx-space-24: 96px;
  --sx-space-32: 128px;
  --sx-layout-max-width: 1728px;
  --sx-layout-gutter: 16px;
  --sx-layout-gutter-wide: 40px;
  --sx-layout-nav-height: 48px;
  --sx-layout-bp-type: 768px;
  --sx-layout-bp-layout: 1024px;
  --sx-radius-none: 0px;
  --sx-radius-chip: 4px;
  --sx-radius-button: 6px;
  --sx-radius-window: 10px;
  --sx-border-hairline: 1px;
  --sx-shadow-window: 0 24px 48px -24px rgba(0,0,0,.55);
  --sx-logo-symbol-min: 16px;
  --sx-logo-full-min: 88px;
  --sx-logo-clear-space: 20%;
  --sx-icon-grid: 16px;
  --sx-icon-arrow-grid: 8px;
  --sx-icon-arrow-pad: 4px;
  --sx-icon-size-16: 16px;
  --sx-icon-size-32: 32px;
  --sx-icon-size-48: 48px;
  --sx-icon-size-64: 64px;
  --sx-icon-size-96: 96px;
  --sx-icon-accent-opacity: 0.55;
  --sx-illustration-grid: 32px;
  --sx-illustration-grid-opacity: 0.16;
  --sx-illustration-window-bg: var(--sx-ink);
  --sx-illustration-window-radius: var(--sx-radius-window);
  --sx-illustration-window-line-opacity: 0.14;
  --sx-illustration-window-shadow: var(--sx-shadow-window);
  --sx-motion-bead: 3.2s;
  --sx-motion-sequence-step-min: 1.1s;
  --sx-motion-sequence-step-max: 1.5s;
  --sx-motion-state-min: 2.6s;
  --sx-motion-state-max: 3.6s;
  --sx-motion-pixel-easing: steps(1, end);
  --sx-component-button-height: 48px;
  --sx-component-secondary-bg-min: 0.05;
  --sx-component-secondary-bg-max: 0.1;
}

:root, [data-theme="light"] {
  color-scheme: light;
  --sx-bg: var(--sx-paper);
  --sx-surface: var(--sx-paper-2);
  --sx-surface-2: var(--sx-paper-3);
  --sx-line: var(--sx-line-light);
  --sx-fg: var(--sx-ink);
  --sx-fg-2: var(--sx-muted);
  --sx-fg-3: var(--sx-muted);
  --sx-btn-bg: var(--sx-ink);
  --sx-btn-fg: var(--sx-paper);
  --sx-focus: var(--sx-cobalt);
}

[data-theme="dark"] {
  color-scheme: dark;
  --sx-bg: var(--sx-ink);
  --sx-surface: var(--sx-ink-2);
  --sx-surface-2: var(--sx-ink-3);
  --sx-line: var(--sx-ink-3);
  --sx-fg: var(--sx-paper);
  --sx-fg-2: var(--sx-muted-2);
  --sx-fg-3: var(--sx-muted);
  --sx-btn-bg: var(--sx-paper);
  --sx-btn-fg: var(--sx-ink);
  --sx-focus: var(--sx-lime);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --sx-bg: var(--sx-ink);
    --sx-surface: var(--sx-ink-2);
    --sx-surface-2: var(--sx-ink-3);
    --sx-line: var(--sx-ink-3);
    --sx-fg: var(--sx-paper);
    --sx-fg-2: var(--sx-muted-2);
    --sx-fg-3: var(--sx-muted);
    --sx-btn-bg: var(--sx-paper);
    --sx-btn-fg: var(--sx-ink);
    --sx-focus: var(--sx-lime);
  }
}

@media (max-width: 768px) {
  :root {
    --sx-type-display-size: 40px;
    --sx-type-display-lh: 48px;
    --sx-type-h1-size: 40px;
    --sx-type-h1-lh: 48px;
    --sx-type-h2-size: 28px;
    --sx-type-h2-lh: 40px;
    --sx-type-h3-size: 24px;
    --sx-type-h3-lh: 28px;
    --sx-type-h4-size: 20px;
    --sx-type-h4-lh: 24px;
    --sx-type-h5-size: 24px;
    --sx-type-h5-lh: 32px;
    --sx-type-h6-size: 16px;
    --sx-type-h6-lh: 24px;
    --sx-type-body-large-size: 16px;
    --sx-type-body-large-lh: 24px;
    --sx-type-body-size: 16px;
    --sx-type-body-lh: 24px;
    --sx-type-small-size: 13px;
    --sx-type-small-lh: 20px;
    --sx-type-button-large-size: 16px;
    --sx-type-button-large-lh: 24px;
    --sx-type-button-small-size: 13px;
    --sx-type-button-small-lh: 20px;
    --sx-type-eyebrow-size: 12px;
    --sx-type-eyebrow-lh: 16px;
    --sx-type-chip-size: 12px;
    --sx-type-chip-lh: 16px;
  }
}

:root { --sx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'%3E%3Cpath fill='%23FAFAF4' fill-opacity='.16' d='M35 29h1v1h-1zM37 12h1v1h-1zM32 30h1v1h-1zM9 5h1v1h-1zM44 40h1v1h-1zM25 28h1v1h-1zM0 33h1v1h-1zM2 12h1v1h-1zM18 31h1v1h-1zM5 29h1v1h-1zM14 32h1v1h-1zM4 36h1v1h-1zM3 30h1v1h-1zM45 25h1v1h-1zM36 40h1v1h-1zM43 17h1v1h-1zM19 21h1v1h-1zM26 7h1v1h-1zM45 6h1v1h-1zM29 31h1v1h-1zM35 12h1v1h-1zM12 46h1v1h-1zM25 26h1v1h-1zM38 41h1v1h-1zM16 0h1v1h-1zM4 5h1v1h-1zM40 15h1v1h-1zM23 23h1v1h-1zM36 8h1v1h-1zM14 39h1v1h-1zM12 10h1v1h-1zM2 32h1v1h-1zM11 46h1v1h-1zM41 39h1v1h-1zM17 26h1v1h-1zM3 2h1v1h-1zM23 33h1v1h-1zM28 21h1v1h-1zM1 30h1v1h-1zM47 2h1v1h-1zM30 4h1v1h-1zM40 7h1v1h-1zM47 44h1v1h-1zM44 7h1v1h-1zM39 42h1v1h-1zM9 43h1v1h-1zM42 16h1v1h-1zM27 12h1v1h-1zM31 22h1v1h-1zM17 10h1v1h-1zM30 17h1v1h-1zM39 28h1v1h-1zM2 17h1v1h-1zM36 1h1v1h-1zM17 15h1v1h-1zM6 40h1v1h-1zM40 23h1v1h-1zM30 16h1v1h-1zM0 30h1v1h-1zM2 11h1v1h-1zM22 34h1v1h-1zM46 24h1v1h-1zM29 12h1v1h-1zM13 6h1v1h-1zM15 24h1v1h-1zM2 28h1v1h-1zM26 17h1v1h-1zM1 13h1v1h-1zM8 30h1v1h-1zM33 46h1v1h-1zM43 44h1v1h-1zM31 37h1v1h-1zM35 18h1v1h-1zM32 35h1v1h-1zM42 24h1v1h-1z'/%3E%3Cpath fill='%23101013' fill-opacity='.14' d='M11 6h1v1h-1zM39 41h1v1h-1zM38 1h1v1h-1zM20 28h1v1h-1zM12 33h1v1h-1zM26 35h1v1h-1zM5 45h1v1h-1zM25 6h1v1h-1zM24 4h1v1h-1zM43 0h1v1h-1zM26 41h1v1h-1zM0 17h1v1h-1zM37 19h1v1h-1zM1 13h1v1h-1zM2 9h1v1h-1zM21 18h1v1h-1zM8 37h1v1h-1zM11 40h1v1h-1zM35 12h1v1h-1zM24 30h1v1h-1zM26 3h1v1h-1zM15 47h1v1h-1zM16 26h1v1h-1zM38 31h1v1h-1zM8 14h1v1h-1zM17 13h1v1h-1zM13 47h1v1h-1zM8 5h1v1h-1zM44 33h1v1h-1zM8 37h1v1h-1zM44 19h1v1h-1zM1 38h1v1h-1zM30 4h1v1h-1zM20 8h1v1h-1zM4 28h1v1h-1zM47 47h1v1h-1zM21 22h1v1h-1zM26 1h1v1h-1zM36 0h1v1h-1zM24 24h1v1h-1zM38 4h1v1h-1zM26 46h1v1h-1zM28 29h1v1h-1zM5 33h1v1h-1zM1 19h1v1h-1zM30 1h1v1h-1zM16 0h1v1h-1zM33 10h1v1h-1zM21 42h1v1h-1zM31 15h1v1h-1zM24 14h1v1h-1zM20 13h1v1h-1zM2 45h1v1h-1zM26 24h1v1h-1zM31 43h1v1h-1zM2 43h1v1h-1zM36 22h1v1h-1zM25 29h1v1h-1zM3 40h1v1h-1zM43 12h1v1h-1zM33 32h1v1h-1zM10 25h1v1h-1zM44 14h1v1h-1zM0 24h1v1h-1zM41 32h1v1h-1zM21 29h1v1h-1zM41 45h1v1h-1zM19 34h1v1h-1zM20 16h1v1h-1zM1 22h1v1h-1zM4 27h1v1h-1zM11 34h1v1h-1zM5 14h1v1h-1zM35 40h1v1h-1zM39 13h1v1h-1z'/%3E%3C/svg%3E"); }
}
@layer base {
/* Base: reset, tipografia, focus. Colori, misure e font solo da token. */
:root { --g: var(--sx-layout-gutter); }
@media (min-width: 1024px) { :root { --g: var(--sx-layout-gutter-wide); } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--sx-bg);
  scroll-padding-top: calc(var(--sx-layout-nav-height) + var(--sx-space-4));
}
body {
  margin: 0; min-height: 100vh; padding-top: var(--sx-layout-nav-height);
  background: var(--sx-bg); color: var(--sx-fg);
  font-family: var(--font-sans); font-weight: var(--sx-type-body-weight);
  font-size: var(--sx-type-body-size); line-height: var(--sx-type-body-lh);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Il tracking stretto del corpo vale per i paragrafi; titoli, link e etichette restano a spaziatura normale. */
p { text-wrap: pretty; letter-spacing: var(--sx-type-body-track); }
:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
main:focus { outline: none; }
::selection { background: var(--sx-cobalt); color: var(--sx-paper); }

main, .sx-footer { max-width: var(--sx-layout-max-width); margin-inline: auto; }
@media (min-width: 1729px) { main, .sx-footer { border-inline: var(--sx-border-hairline) solid var(--sx-line); } }

/* Scala tipografica (DESIGN_SYSTEM §5): i valori fino a 768px arrivano dai token. */
.sx-display { font-size: var(--sx-type-display-size); line-height: var(--sx-type-display-lh); font-weight: var(--sx-type-display-weight); letter-spacing: var(--sx-type-display-track); }
.sx-h1 { font-size: var(--sx-type-h1-size); line-height: var(--sx-type-h1-lh); font-weight: var(--sx-type-h1-weight); letter-spacing: var(--sx-type-h1-track); }
.sx-h2 { font-size: var(--sx-type-h2-size); line-height: var(--sx-type-h2-lh); font-weight: var(--sx-type-h2-weight); letter-spacing: var(--sx-type-h2-track); }
.sx-h3 { font-size: var(--sx-type-h3-size); line-height: var(--sx-type-h3-lh); font-weight: var(--sx-type-h3-weight); letter-spacing: var(--sx-type-h3-track); }
.sx-h4 { font-size: var(--sx-type-h4-size); line-height: var(--sx-type-h4-lh); font-weight: var(--sx-type-h4-weight); letter-spacing: var(--sx-type-h4-track); }
.sx-h5 { font-size: var(--sx-type-h5-size); line-height: var(--sx-type-h5-lh); font-weight: var(--sx-type-h5-weight); letter-spacing: var(--sx-type-h5-track); }
.sx-h6 { font-size: var(--sx-type-h6-size); line-height: var(--sx-type-h6-lh); font-weight: var(--sx-type-h6-weight); letter-spacing: var(--sx-type-h6-track); }
.sx-lead { font-size: var(--sx-type-body-large-size); line-height: var(--sx-type-body-large-lh); letter-spacing: var(--sx-type-body-large-track); }
.sx-small { font-size: var(--sx-type-small-size); line-height: var(--sx-type-small-lh); }
.sx-eyebrow {
  font-family: var(--font-mono); font-size: var(--sx-type-eyebrow-size); line-height: var(--sx-type-eyebrow-lh);
  letter-spacing: var(--sx-type-eyebrow-track); text-transform: uppercase; color: var(--sx-fg-2);
}
.sx-chip {
  display: inline-flex; align-items: center; padding: var(--sx-space-1) var(--sx-space-2); border-radius: var(--sx-radius-chip);
  font-family: var(--font-mono); font-size: var(--sx-type-chip-size); line-height: var(--sx-type-chip-lh);
  letter-spacing: var(--sx-type-chip-track); text-transform: uppercase; white-space: nowrap;
  background: var(--sx-surface-2); color: var(--sx-fg);
}

}
@layer illustrations {
/* =====================================================================
   SPUN · illustrazioni animate, icone pixel, mosaico dell'hero.
   Codice SPUN, portato dal riferimento spun-mistral senza le parti che
   servivano ad agganciarsi a Mistral. Colori e font solo da token.
   Markup: ai/src/sx/illustrations.py · animazioni: assets/js/illustrations.js
   ===================================================================== */
.sx-px { display: block; width: 100%; height: 100%; overflow: visible; }
.sx-icon-wrap { display: inline-flex; align-items: center; justify-content: center; }
/* Hero a mosaico (sostituisce il Lottie) */
.sx-pixel-hero { position: absolute; inset: 0; overflow: hidden; background: var(--sx-cobalt); }
.sx-pixel-hero canvas { position: absolute; inset: 0; display: block; }
.sx-ph-label {
  position: absolute; left: 0; top: 0; z-index: 2;
  font-family: var(--font-mono); font-size: 12px; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--sx-ink); background: var(--sx-paper); padding: 6px 8px;
  will-change: transform;
}
/* Simbolo originale del logo con la scintilla (D-030, DESIGN_SYSTEM §3): viewBox 325.8 x 348.54,
   le misure seguono quella proporzione. Paper sul cobalt del mosaico. */
.sx-ph-symbol {
  position: absolute; z-index: 2; right: clamp(16px, 4vw, 56px); bottom: clamp(16px, 3vw, 40px);
  width: 70px; height: 75px; color: var(--sx-paper);
}
.sx-ph-symbol .sx-symbol { width: 100%; height: 100%; }
@media (min-width: 1024px) { .sx-ph-symbol { width: 98px; height: 105px; } }

/* Miniature "In evidenza" e icone al posto delle img di Mistral */
.sx-thumb { display: grid; place-items: center; width: 100%; height: 100%; background: var(--f); color: var(--k); }
.sx-thumb .sx-px { width: 56%; height: 56%; }
.sx-rail-ico { display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: var(--f); color: var(--k); }
.sx-rail-ico .sx-px { width: 64%; height: 64%; }


/* Storie: al posto del logo cliente, etichetta mono con icona pixel */
.sx-story-mark {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sx-fg);
}
.sx-story-mark .sx-px { width: 22px; height: 22px; }
.sx-story-art { position: absolute; inset: 0; background: var(--f); color: var(--sx-ink); display: grid; place-items: center; overflow: hidden; }
.sx-story-icon { width: min(34%, 180px); aspect-ratio: 1; position: relative; z-index: 1; }
/* Da desktop il testo della storia sta nella metà sinistra, sopra il campo:
   icona ed etichetta vanno nella metà destra, lontano dal bottone. */
@media (min-width: 1024px) {
  .sx-story-icon { position: absolute; left: 75%; top: 50%; transform: translate(-50%, -50%); width: min(22%, 200px); }
}
.sx-story-label {
  position: absolute; right: 16px; bottom: 16px; z-index: 1;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--sx-ink); color: var(--sx-paper); padding: 5px 8px;
}


/* ---------- 4. Illustrazioni card prodotto ---------------------------- */
.sx-illu {
  --line: color-mix(in srgb, var(--k) 16%, transparent);
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 2400 / 1211;
  background: var(--f); color: var(--k);
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: center;
  font-family: var(--font-sans);
}
.sx-illu-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line, rgba(16,16,19,.14)) 1px, transparent 1px),
    linear-gradient(90deg, var(--line, rgba(16,16,19,.14)) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
.sx-illu-tags { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-left: clamp(16px, 4%, 44px); }
.sx-tag {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase;
  background: var(--k); color: var(--f); padding: 5px 8px; white-space: nowrap;
}
.sx-tag i { width: 6px; height: 6px; background: currentColor; }
.sx-tag::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: 400px; height: 1px;
  background: color-mix(in srgb, var(--k) 45%, transparent);
  transform-origin: left; animation: sx-wire 3.6s steps(12, end) infinite;
  animation-delay: calc(var(--tag-i, 0) * 220ms);
}
.sx-tag:nth-child(2)::after { --tag-i: 1; } .sx-tag:nth-child(3)::after { --tag-i: 2; }
.sx-tag:nth-child(4)::after { --tag-i: 3; } .sx-tag:nth-child(5)::after { --tag-i: 4; }
@keyframes sx-wire { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
.sx-illu-stage { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 4%, 40px); }
.sx-illu--host .sx-illu-stage, .sx-illu--pro .sx-illu-stage, .sx-illu--custom .sx-illu-stage { grid-column: 1 / -1; }
.sx-illu--pro .sx-illu-stage { grid-column: 2; }

/* Finestra d'interfaccia: sempre scura, come uno screenshot */
.sx-win {
  width: min(100%, 440px); background: var(--sx-ink); color: var(--sx-paper);
  border: 1px solid rgba(250,250,244,.14); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -24px rgba(0,0,0,.55);
  font-size: 13px; line-height: 1.4;
}
.sx-win-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(250,250,244,.1); }
.sx-win-ico { width: 16px; height: 16px; color: var(--f); }
.sx-win-name { font-weight: 600; }
.sx-win-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: rgba(250,250,244,.62); }
.sx-win-state i { width: 6px; height: 6px; background: var(--sx-lime); animation: sx-led 1.6s steps(1) infinite; }
.sx-win-state b { font-weight: 400; font-variant-numeric: tabular-nums; }
@keyframes sx-led { 50% { opacity: .25; } }

/* Chat e trascrizione: i messaggi nuovi entrano dal basso */
.sx-log { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: clamp(170px, 19vw, 250px); padding: 12px; overflow: hidden; }
.sx-msg { margin: 0; max-width: 84%; padding: 8px 10px; border-radius: 10px; }
.sx-msg--bot { align-self: flex-start; background: rgba(250,250,244,.08); border-bottom-left-radius: 2px; }
.sx-msg--user { align-self: flex-end; background: var(--f); color: var(--k); border-bottom-right-radius: 2px; }
.sx-src, .sx-handoff { margin: 0; align-self: flex-start; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(250,250,244,.6); border: 1px dashed rgba(250,250,244,.28); padding: 4px 7px; }
.sx-handoff { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-lime); border-color: color-mix(in srgb, var(--sx-lime) 50%, transparent); }
.sx-handoff i { width: 6px; height: 6px; background: currentColor; }
.sx-typing { display: none; align-self: flex-start; gap: 4px; padding: 10px; background: rgba(250,250,244,.08); border-radius: 10px; }
.sx-typing i { width: 5px; height: 5px; background: rgba(250,250,244,.7); animation: sx-dot 1s steps(2, jump-none) infinite; }
.sx-typing i:nth-child(2) { animation-delay: .15s; } .sx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sx-dot { 50% { transform: translateY(-3px); opacity: .45; } }
.sx-play [data-step]:not(.is-on) { display: none; }
.sx-play [data-step].is-on { animation: sx-in .32s cubic-bezier(.2,.7,.2,1) both; }
.sx-play .sx-typing.is-on { display: inline-flex; }
@keyframes sx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sx-call-head { display: flex; justify-content: space-between; padding: 10px 12px 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(250,250,244,.6); }
.sx-eq { display: flex; align-items: center; gap: 3px; height: 44px; padding: 6px 12px; }
.sx-eq i { flex: 1; height: var(--h); background: var(--f); animation: sx-eq 1.1s steps(4, jump-none) infinite alternate; animation-delay: var(--d); }
@keyframes sx-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.sx-log--call { height: clamp(130px, 14vw, 190px); padding-top: 4px; }
.sx-line { margin: 0; display: grid; grid-template-columns: 58px 1fr; gap: 8px; color: rgba(250,250,244,.78); }
.sx-line b { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(250,250,244,.5); padding-top: 2px; }
.sx-line--ai { color: var(--sx-paper); }
.sx-line--ai b { color: var(--f); }
.sx-log--call .sx-typing { margin-left: 66px; }

/* Studio: il marchio cambia, la suite resta */
.sx-brand-swatch { width: 16px; height: 16px; background: var(--sx-cobalt); transition: background .5s steps(3); }
.sx-brand-name { position: relative; display: inline-grid; }
.sx-brand-name span { grid-area: 1 / 1; transition: opacity .35s, transform .35s; }
.sx-win--studio [data-i="1"].sx-brand-name, .sx-brand-name span[data-i="1"] { opacity: 0; transform: translateY(6px); }
.sx-win--studio[data-i="1"] .sx-brand-name span[data-i="0"] { opacity: 0; transform: translateY(-6px); }
.sx-win--studio[data-i="1"] .sx-brand-name span[data-i="1"] { opacity: 1; transform: none; }
.sx-win--studio[data-i="1"] .sx-brand-swatch { background: var(--sx-coral); }
.sx-studio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(250,250,244,.1); }
.sx-mod { display: flex; flex-direction: column; gap: 18px; padding: 16px; background: var(--sx-ink); font-weight: 600; }
.sx-mod-ico { width: 28px; height: 28px; color: var(--sx-cobalt); transition: color .5s; animation: sx-mod 5.2s steps(1) infinite; animation-delay: calc(var(--n) * 1.3s); }
.sx-win--studio[data-i="1"] .sx-mod-ico { color: var(--sx-coral); }
@keyframes sx-mod { 0%, 20% { filter: none; } 21%, 100% { filter: saturate(.2) brightness(.7); } }

/* Host: rack pixel + interruttore locale/cloud */
.sx-host { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4%, 48px); width: 100%; }
.sx-rack { position: relative; display: flex; flex-direction: column; gap: 6px; width: clamp(90px, 18%, 150px); padding: 10px; background: var(--sx-ink); border-radius: 6px; transition: opacity .5s, transform .5s; }
.sx-rack-unit { display: flex; align-items: center; gap: 5px; height: clamp(18px, 2.2vw, 26px); padding: 0 8px; border: 1px solid rgba(250,250,244,.16); }
.sx-rack-unit i { width: 5px; height: 5px; background: var(--sx-lime); animation: sx-led 1.3s steps(1) infinite; }
.sx-rack-unit:nth-child(2) i { animation-delay: .4s; } .sx-rack-unit:nth-child(3) i { animation-delay: .8s; }
.sx-rack-unit i + i { background: var(--f); animation-duration: 2.1s; }
.sx-rack-unit b { margin-left: auto; width: 34%; height: 3px; background: rgba(250,250,244,.3); }
.sx-rack-cloud { position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 1; color: var(--sx-paper); transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .5s, transform .5s steps(4); }
.sx-host[data-state="cloud"] .sx-rack-unit { opacity: .18; }
.sx-host[data-state="cloud"] .sx-rack-cloud { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sx-win--host { width: min(100%, 360px); }
.sx-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 12px; padding: 3px; background: rgba(250,250,244,.08); border-radius: 7px; }
.sx-seg span { position: relative; z-index: 1; text-align: center; padding: 6px 0; font-weight: 600; transition: color .3s; }
.sx-seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--f); border-radius: 5px; transition: transform .45s cubic-bezier(.65,0,.35,1); }
.sx-host[data-state="locale"] .sx-seg span[data-v="locale"], .sx-host[data-state="cloud"] .sx-seg span[data-v="cloud"] { color: var(--k); }
.sx-host[data-state="cloud"] .sx-seg i { transform: translateX(100%); }
.sx-spec { margin: 0; padding: 0 12px 12px; display: grid; gap: 1px; }
.sx-spec div { display: grid; grid-template-columns: 78px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(250,250,244,.08); }
.sx-spec dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(250,250,244,.5); padding-top: 2px; }
.sx-spec dd { margin: 0; }
.sx-host[data-state="locale"] [data-when="cloud"], .sx-host[data-state="cloud"] [data-when="locale"] { display: none; }
.sx-host[data-state] dd { animation: sx-in .35s both; }

/* Pro: l'azienda e il suo gemello */
.sx-twin { display: grid; grid-template-columns: 1fr clamp(40px, 8%, 90px) 1fr; align-items: center; width: 100%; max-width: 560px; }
.sx-twin-card { background: var(--sx-ink); color: var(--sx-paper); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.sx-twin-card--ai { background: transparent; color: var(--k); border: 1px dashed var(--k); }
.sx-twin-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.sx-org { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 34px; }
.sx-org b { position: absolute; top: 0; left: 50%; width: 22px; height: 22px; transform: translateX(-50%); background: currentColor; }
.sx-org::before { content: ""; position: absolute; top: 22px; left: 12%; right: 12%; height: 12px; border: 1px solid currentColor; border-bottom: 0; opacity: .5; }
.sx-org i { height: 18px; background: currentColor; opacity: .85; }
.sx-org--ai i { animation: sx-twin 3.2s steps(1) infinite; animation-delay: calc(var(--n) * .4s + .2s); }
.sx-org--ai b { animation: sx-twin 3.2s steps(1) infinite; }
@keyframes sx-twin { 0%, 30% { opacity: .95; } 31%, 100% { opacity: .35; } }
.sx-twin-link { position: relative; height: 1px; background: var(--k); }
.sx-twin-link i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: var(--k); animation: sx-pulse 1.6s steps(8, end) infinite; }
@keyframes sx-pulse { from { left: 0; } to { left: calc(100% - 7px); } }

/* Su misura: quattro competenze, un solo interlocutore */
.sx-illu--custom .sx-illu-stage { flex-direction: column; gap: clamp(10px, 3%, 24px); }
.sx-hub { position: relative; width: min(100%, 520px); aspect-ratio: 2.4 / 1; }
.sx-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-hub-lines line { stroke: var(--k); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; animation: sx-dash 1.2s linear infinite; }
@keyframes sx-dash { to { stroke-dashoffset: -16; } }
.sx-hub-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: var(--sx-ink); color: var(--sx-paper); padding: 6px 9px;
  animation: sx-node 4.8s steps(1) infinite; animation-delay: calc(var(--n) * 1.2s);
}
@keyframes sx-node { 0%, 24% { background: var(--sx-cobalt); } 25%, 100% { background: var(--sx-ink); } }
/* padding in px: in percentuale si calcola sulla larghezza di .sx-hub
   (520px), non del riquadro, e il simbolo restava largo zero. */
.sx-hub-core { position: absolute; left: 50%; top: 50%; width: clamp(48px, 13%, 72px); aspect-ratio: 1; display: grid; place-items: center; transform: translate(-50%, -50%); background: var(--f); border: 1px solid var(--k); color: var(--k); padding: 12px; box-sizing: border-box; }
.sx-hub-core svg { width: 100%; height: auto; fill: currentColor; display: block; }
.sx-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 520px); border-top: 1px solid var(--k); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.sx-steps span { padding-top: 10px; }
.sx-steps span:nth-child(2) { text-align: center; } .sx-steps span:nth-child(3) { text-align: right; }
.sx-steps i { position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--k); animation: sx-pulse 3.6s steps(18, end) infinite; }

/* Schermi stretti: niente etichette laterali, la finestra occupa il campo */
@media (max-width: 767px) {
  .sx-illu { aspect-ratio: auto; min-height: 300px; grid-template-columns: 1fr; }
  .sx-illu-tags { display: none; }
  .sx-illu--pro .sx-illu-stage { grid-column: 1; }
  .sx-log { height: 200px; }
  .sx-host { flex-direction: column; }
  .sx-rack { flex-direction: row; width: auto; }
  .sx-rack-unit { width: 56px; }
  .sx-rack-cloud { width: 40px; }
  .sx-hub-node { font-size: 10px; padding: 5px 7px; }
}


/* Illustrazioni delle funzioni */
.sx-feat {
  --line: color-mix(in srgb, var(--k) 16%, transparent);
  position: relative; overflow: hidden; width: 100%;
  background: var(--f); color: var(--k); font-family: var(--font-sans);
}
.sx-feat-stage { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: clamp(12px, 5%, 40px); }
.sx-win--mini { width: min(100%, 380px); font-size: 12.5px; }
.sx-log--mini { height: clamp(150px, 15vw, 210px); }
.sx-file { margin: 0; display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid rgba(250,250,244,.12); border-radius: 6px; font-family: var(--font-mono); font-size: 11px; }
.sx-file b { font-weight: 400; color: var(--sx-lime); text-transform: uppercase; letter-spacing: .05em; }
.sx-feat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--k); color: var(--f); padding: 5px 8px; }
.sx-feat-icon { width: clamp(56px, 22%, 128px); aspect-ratio: 1; }
.sx-float { animation: sx-float 3s steps(3, jump-none) infinite alternate; }
@keyframes sx-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }

.sx-cyc-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 0; }
.sx-cyc-tabs span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; border: 1px solid rgba(250,250,244,.18); border-radius: 4px; color: rgba(250,250,244,.6); transition: background .3s, color .3s; }
.sx-cyc-text { padding: 14px 12px 16px; min-height: 68px; }
.sx-cyc-text p { margin: 0; display: none; font-size: 15px; }
.sx-cycle[data-i="0"] .sx-cyc-tabs [data-c="0"], .sx-cycle[data-i="1"] .sx-cyc-tabs [data-c="1"],
.sx-cycle[data-i="2"] .sx-cyc-tabs [data-c="2"], .sx-cycle[data-i="3"] .sx-cyc-tabs [data-c="3"] { background: var(--f); color: var(--k); border-color: var(--f); }
.sx-cycle[data-i="0"] .sx-cyc-text [data-c="0"], .sx-cycle[data-i="1"] .sx-cyc-text [data-c="1"],
.sx-cycle[data-i="2"] .sx-cyc-text [data-c="2"], .sx-cycle[data-i="3"] .sx-cyc-text [data-c="3"] { display: block; animation: sx-in .35s both; }

.sx-flow { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; width: min(100%, 480px); padding-top: 22px; }
.sx-flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 7px; height: 1px; background: var(--k); }
.sx-flow span { position: relative; text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; background: var(--sx-ink); color: var(--sx-paper); padding: 9px 4px; animation: sx-node 4.8s steps(1) infinite; animation-delay: calc(var(--n) * 1.2s); }
.sx-flow span::before { content: ""; position: absolute; left: 50%; top: -18px; width: 7px; height: 7px; transform: translateX(-50%); background: var(--k); }
.sx-flow i { position: absolute; top: 4px; left: 10%; width: 7px; height: 7px; background: var(--sx-cobalt); animation: sx-flow-dot 4.8s steps(24, end) infinite; }
@keyframes sx-flow-dot { from { left: 10%; } to { left: 88%; } }

.sx-packets { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: min(100%, 480px); }
.sx-pk-node { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; background: var(--sx-ink); color: var(--sx-paper); padding: 12px; }
.sx-pk-node .sx-px { width: 32px; height: 32px; }
.sx-pk-line { position: relative; height: 1px; border-top: 1px dashed var(--k); }
.sx-pk-line i { position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--k); animation: sx-pulse 1.8s steps(12, end) infinite; }
.sx-pk-line i:nth-child(2) { animation-delay: .6s; } .sx-pk-line i:nth-child(3) { animation-delay: 1.2s; }
.sx-pk-line b { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font: 400 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.sx-rack--solo { width: clamp(110px, 30%, 170px); }

.sx-poi { position: relative; width: min(100%, 440px); aspect-ratio: 16 / 10; background: var(--sx-ink); border-radius: 10px; overflow: hidden; color: var(--f); }
.sx-poi::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(250,250,244,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(250,250,244,.07) 1px, transparent 1px); background-size: 22px 22px; }
.sx-poi span { position: absolute; left: var(--x); top: var(--y); width: 24px; height: 24px; transform: translate(-50%, -100%); animation: sx-pin 2.4s steps(1) infinite; animation-delay: var(--d); }
@keyframes sx-pin { 0%, 60% { transform: translate(-50%, -100%); } 61%, 100% { transform: translate(-50%, -135%); } }
.sx-poi b { position: absolute; left: 12px; bottom: 12px; font: 400 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sx-paper); }

.sx-route { position: relative; width: min(100%, 460px); aspect-ratio: 16 / 9; background: var(--sx-ink); border-radius: 10px; color: var(--sx-paper); overflow: hidden; }
.sx-route-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-route-path path { fill: none; stroke: rgba(250,250,244,.45); stroke-width: 2; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.sx-route-stop { position: absolute; font: 400 10.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; background: var(--f); color: var(--sx-ink); padding: 5px 7px; }
.sx-route-car { position: absolute; width: 32px; height: 32px; color: var(--f); transform: translate(-50%, -60%); animation: sx-drive 4.2s steps(28, end) infinite; }
@keyframes sx-drive { 0% { left: 14%; top: 72%; } 33% { left: 38%; top: 66%; } 66% { left: 60%; top: 36%; } 100% { left: 82%; top: 26%; } }
.sx-route b { position: absolute; left: 12px; top: 12px; font: 400 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

.sx-pano { position: relative; width: min(100%, 460px); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(#101013 0 55%, #1a1a1e 55%); }
.sx-pano::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: #1a1a1e; }
.sx-pano-strip { position: absolute; left: 0; bottom: 24%; height: 60%; display: flex; align-items: flex-end; width: max-content; animation: sx-pano 18s linear infinite; }
.sx-pano-strip i { width: 30px; height: var(--h); background: var(--c); }
@keyframes sx-pano { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sx-pano-chip { position: absolute; z-index: 1; left: 10px; top: 10px; font: 400 10.5px var(--font-mono); letter-spacing: .06em; background: var(--sx-paper); color: var(--sx-ink); padding: 4px 7px; }
.sx-pano-chip--r { left: auto; right: 10px; }

/* Cronologia: oggetto pixel su campo chiaro */
.sx-tl-art { --line: rgba(16,16,19,.12); position: absolute; inset: 0; background: var(--f); color: var(--sx-ink); display: grid; place-items: center; overflow: hidden; }
.sx-tl-icon { position: relative; width: 24%; aspect-ratio: 1; animation: sx-float 3s steps(3, jump-none) infinite alternate; }

/* Progetti */
.sx-story-mark--lg { font-size: 15px; gap: 12px; }
.sx-story-mark--lg .sx-px { width: 40px; height: 40px; }
/* Su mobile il contenitore di Mistral non ha altezza propria (l'immagine
   originale era assoluta): la scena va in flusso, assoluta solo da md. */
.sx-story-art.sx-project { position: relative; min-height: 340px; height: 100%; }
@media (min-width: 768px) { .sx-story-art.sx-project { position: absolute; inset: 0; min-height: 0; } }
.sx-project .sx-feat-stage { width: 100%; }
.sx-prose > p { margin: 0 0 1.25rem; }
.sx-outcome { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--sx-line); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }


@media (max-width: 767px) {
  .sx-feat { aspect-ratio: auto !important; min-height: 280px; }
  .sx-flow span { font-size: 9px; padding: 8px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-float, .sx-flow span, .sx-flow i, .sx-pk-line i, .sx-poi span, .sx-route-car, .sx-pano-strip, .sx-tl-icon { animation: none !important; }
  .sx-route-car { left: 48%; top: 52%; }
  .sx-flow i { left: 48%; }
}

/* ---------- Movimento ridotto ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sx-tag::after, .sx-win-state i, .sx-typing i,
  .sx-eq i, .sx-mod-ico, .sx-rack-unit i, .sx-org--ai i, .sx-org--ai b, .sx-twin-link i,
  .sx-hub-lines line, .sx-hub-node, .sx-steps i, .sx-host[data-state] dd { animation: none !important; }
  .sx-tag::after { transform: none; }
  .sx-eq i { transform: scaleY(.6); }
  .sx-twin-link i { left: calc(50% - 3px); }
  .sx-steps i { left: calc(50% - 3px); }
}


/* ---------- Pannello di famiglia (D-046, come i blocchi prodotto di Mistral) ---------- */
.sx-illu--family { display: block; }
.sx-illu--family .sx-illu-stage { position: absolute; inset: 0; }
.sx-fp { position: absolute; inset: 0; }
.sx-fp-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-fp-lines line {
  stroke: color-mix(in srgb, var(--k) 38%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 4;
}
.sx-fp-node, .sx-fp-block {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: clamp(36px, 5.2vw, 64px); aspect-ratio: 1;
}
.sx-fp-block { background: color-mix(in srgb, var(--k) 7%, transparent); }
.sx-fp-node {
  display: grid; place-items: center; background: var(--f); color: var(--k);
  outline: 1px solid color-mix(in srgb, var(--sx-ink) 22%, transparent); outline-offset: 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), outline-color .3s;
}
.sx-fp-node svg { width: 50%; height: 50%; }
/* Il prodotto in evidenza: data-i sul contenitore (illustrations.js, data-sx-cycle) */
.sx-fp[data-i="0"] .sx-fp-node[data-n="0"], .sx-fp[data-i="1"] .sx-fp-node[data-n="1"],
.sx-fp[data-i="2"] .sx-fp-node[data-n="2"], .sx-fp[data-i="3"] .sx-fp-node[data-n="3"],
.sx-fp[data-i="4"] .sx-fp-node[data-n="4"] {
  transform: translate(-50%, -50%) scale(1.14); outline: 2px solid var(--k); outline-offset: 3px;
}
.sx-fp[data-i="0"] line:nth-child(1), .sx-fp[data-i="1"] line:nth-child(2), .sx-fp[data-i="2"] line:nth-child(3),
.sx-fp[data-i="3"] line:nth-child(4), .sx-fp[data-i="4"] line:nth-child(5) {
  stroke: var(--k); stroke-width: 1.5; stroke-dasharray: 6 4; animation: sx-flow 1.2s linear infinite;
}
@keyframes sx-flow { to { stroke-dashoffset: -20; } }

/* La finestra: un campo di richiesta e tre suggerimenti, come l'input di Mistral */
.sx-win--ask { position: relative; z-index: 1; width: min(100%, 460px); }
.sx-ask-field { display: flex; align-items: center; gap: 10px; margin: 12px; padding: 10px 10px 10px 14px; background: var(--sx-paper); color: var(--sx-ink); border-radius: 8px; }
.sx-ask-q { flex: 1; margin: 0; min-height: 1.4em; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-ask-send { display: grid; place-items: center; flex: none; width: 28px; height: 28px; background: var(--sx-ink); color: var(--sx-paper); border-radius: 6px; }
.sx-ask-send svg { width: 14px; height: 14px; }
.sx-ask-list { display: grid; gap: 2px; padding: 0 12px 12px; }
.sx-ask-item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 6px; background: rgba(250,250,244,.06); color: rgba(250,250,244,.86); }
.sx-ask-ico { display: grid; place-items: center; flex: none; width: 22px; height: 22px; background: var(--f); color: var(--k); }
.sx-ask-ico svg { width: 12px; height: 12px; }
/* Animata: la richiesta si scrive, poi i suggerimenti entrano senza spostare la finestra */
.sx-play .sx-ask-q:not(.is-on) { display: block; clip-path: inset(0 100% 0 0); }
.sx-play .sx-ask-q.is-on { animation: sx-type 1.1s steps(26, end) both; }
.sx-play .sx-ask-item:not(.is-on) { display: flex; opacity: 0; }
@keyframes sx-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 767px) {
  .sx-illu--family { min-height: 420px; }
  .sx-ask-q { white-space: normal; }
  .sx-fp-node, .sx-fp-block { width: 36px; }
  .sx-fp-node { left: calc(30px + var(--n) * 46px); top: 32px; }   /* sul telefono i prodotti in fila, in alto */
  .sx-fp-block, .sx-fp-lines { display: none; }
  .sx-illu--family .sx-illu-stage { padding: 64px 12px 16px; align-items: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-fp-lines line { animation: none !important; }
  .sx-fp-node { transition: none; }
}

}
@layer layout {
/* Struttura: nav fissa, menu mobile, footer, sezioni a celle. */

/* ---------- Nav --------------------------------------------------------- */
.sx-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--sx-layout-nav-height);
  background: var(--sx-bg); box-shadow: 0 var(--sx-border-hairline) 0 var(--sx-line);
}
.sx-nav { display: flex; align-items: stretch; height: 100%; max-width: var(--sx-layout-max-width); margin-inline: auto; }
/* Logo completo alla larghezza minima consentita (DESIGN_SYSTEM §2: 88px). */
.sx-nav__home {
  display: grid; place-items: center; flex: none; padding-inline: var(--sx-space-4);
  border-right: var(--sx-border-hairline) solid var(--sx-line); color: var(--sx-fg); transition: background-color .15s;
}
.sx-nav__home:hover { background: var(--sx-surface); }
.sx-nav__home .sx-logo { width: 88px; height: auto; }
.sx-nav__menu { display: none; }
.sx-nav__item { position: relative; display: flex; }
.sx-nav__trigger {
  display: flex; align-items: center; gap: var(--sx-space-2); height: 100%; padding: 0 var(--sx-space-4);
  border-right: var(--sx-border-hairline) solid var(--sx-line); white-space: nowrap;
  font-size: var(--sx-type-button-large-size); line-height: var(--sx-type-button-large-lh);
  font-weight: 500; letter-spacing: var(--sx-type-button-large-track);
  transition: background-color .15s;
}
.sx-nav__trigger:hover, .sx-nav__trigger.is-active, .sx-nav__item.is-open > .sx-nav__trigger { background: var(--sx-surface); }
.sx-nav__chev { display: grid; width: 16px; height: 16px; transition: transform .2s steps(2, jump-none); }
.sx-nav__chev .sx-arrow { width: 16px; height: 16px; }
.sx-nav__item.is-open .sx-nav__chev { transform: rotate(180deg); }
.sx-nav__actions { display: flex; align-items: stretch; margin-left: auto; }
.sx-nav__item--start { display: none; }
.sx-nav__trigger--start { gap: var(--sx-space-3); border-right: 0; border-left: var(--sx-border-hairline) solid var(--sx-line); }
.sx-nav__cta {
  display: flex; align-items: center; gap: var(--sx-space-3); padding: 0 var(--sx-space-4);
  background: var(--sx-btn-bg); color: var(--sx-btn-fg); white-space: nowrap;
  font-size: var(--sx-type-button-large-size); line-height: var(--sx-type-button-large-lh); font-weight: 500;
  letter-spacing: var(--sx-type-button-large-track);
}
.sx-nav__cta .sx-arrow { width: 16px; height: 16px; transition: transform .2s steps(2, jump-none); }
.sx-nav__cta:hover .sx-arrow { transform: translateX(4px); }
.sx-burger { display: grid; place-items: center; width: var(--sx-layout-nav-height); border-left: var(--sx-border-hairline) solid var(--sx-line); }
.sx-burger .sx-arrow { width: 32px; height: 32px; }
.sx-burger__open, .sx-burger__close { display: grid; }
.sx-burger__close, .sx-burger[aria-expanded="true"] .sx-burger__open { display: none; }
.sx-burger[aria-expanded="true"] .sx-burger__close { display: grid; }
/* Sotto i 1024px il bottone "Parliamone" occupa il centro della barra, senza fondo. */
@media (max-width: 1023px) {
  .sx-nav__actions { flex: 1; }
  .sx-nav__cta { flex: 1; justify-content: center; background: none; color: var(--sx-fg); }
  .sx-burger .sx-arrow { width: 16px; height: 16px; }
}

@media (min-width: 1024px) {
  .sx-nav__menu { display: flex; }
  .sx-nav__item--start { display: flex; }
  .sx-burger { display: none; }
}

/* Pannelli a tendina: senza JS si aprono al passaggio o con il fuoco. */
.sx-nav__panel {
  position: absolute; top: calc(100% + var(--sx-border-hairline)); left: 0; z-index: 2;
  min-width: 300px; max-width: min(92vw, 900px);
  background: var(--sx-bg); border: var(--sx-border-hairline) solid var(--sx-line); border-top: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s steps(3, end), visibility 0s linear .16s;
}
.sx-nav__panel--end { left: auto; right: 0; }
.sx-nav__item.is-open > .sx-nav__panel,
html:not(.sx-js) .sx-nav__item:hover > .sx-nav__panel,
html:not(.sx-js) .sx-nav__item:focus-within > .sx-nav__panel {
  opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s steps(3, end);
}
.sx-navcols { display: flex; gap: var(--sx-border-hairline); background: var(--sx-line); }
.sx-navcol { display: grid; align-content: start; gap: var(--sx-space-1); min-width: 280px; padding: var(--sx-space-2); background: var(--sx-bg); }
.sx-navcol > .sx-eyebrow { padding: var(--sx-space-3) var(--sx-space-3) var(--sx-space-1); }
.sx-navlinks { display: grid; gap: var(--sx-space-1); }
.sx-navlink {
  display: flex; align-items: center; gap: var(--sx-space-3); min-height: var(--sx-component-button-height);
  padding: var(--sx-space-2) var(--sx-space-3); border-radius: var(--sx-radius-button); transition: background-color .12s;
}
.sx-navlink:hover { background: var(--sx-surface); }
.sx-navlink__text { display: grid; }
.sx-navlink__title { font-size: var(--sx-type-h6-size); line-height: var(--sx-type-h6-lh); font-weight: var(--sx-type-h6-weight); }
.sx-navlink__desc { font-size: var(--sx-type-small-size); line-height: var(--sx-type-small-lh); color: var(--sx-fg-2); }
.sx-toneicon {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--sx-radius-button);
  background: var(--f, var(--sx-surface-2)); color: var(--k, var(--sx-fg));
}
.sx-toneicon .sx-px { width: 32px; height: 32px; }
.sx-navmore {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sx-space-4);
  padding: var(--sx-space-3) var(--sx-space-5); border-top: var(--sx-border-hairline) solid var(--sx-line);
  font-size: var(--sx-type-button-small-size); line-height: var(--sx-type-button-small-lh); font-weight: var(--sx-type-button-small-weight);
  transition: background-color .12s;
}
.sx-navmore:hover { background: var(--sx-surface); }
.sx-navmore .sx-arrow { width: 16px; height: 16px; }

/* ---------- Menu mobile ------------------------------------------------- */
.sx-mobile { position: fixed; inset: var(--sx-layout-nav-height) 0 0; z-index: 49; overflow: hidden; background: var(--sx-bg); }
.sx-mobile[hidden] { display: none; }
.sx-mobile__root, .sx-mobile__sub {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--sx-bg); transition: transform .28s steps(7, end);
}
.sx-mobile__sub { transform: translateX(100%); }
.sx-mobile__sub.is-open { transform: none; }
.sx-mobile.has-sub .sx-mobile__root { transform: translateX(-30%); }
.sx-mobile__item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--sx-space-4) var(--g); border-bottom: var(--sx-border-hairline) solid var(--sx-line);
  font-size: var(--sx-type-h4-size); line-height: var(--sx-type-h4-lh); font-weight: var(--sx-type-h4-weight);
}
.sx-mobile__item .sx-arrow { width: 32px; height: 32px; }
.sx-mobile__back { display: flex; align-items: center; gap: var(--sx-space-2); padding: var(--sx-space-4) var(--g) var(--sx-space-2); color: var(--sx-fg-2); font-weight: 500; }
.sx-mobile__back .sx-arrow { width: 16px; height: 16px; }
.sx-mobile__title {
  padding: var(--sx-space-2) var(--g) var(--sx-space-5); border-bottom: var(--sx-border-hairline) solid var(--sx-line);
  font-size: var(--sx-type-h3-size); line-height: var(--sx-type-h3-lh); font-weight: var(--sx-type-h3-weight);
}
.sx-mobile .sx-navcols { flex-direction: column; gap: 0; background: none; }
.sx-mobile .sx-navcol { min-width: 0; padding: var(--sx-space-3) calc(var(--g) - var(--sx-space-3)); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-mobile .sx-navmore { padding-inline: var(--g); border-top: 0; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-mobile__foot { display: grid; gap: var(--sx-space-3); padding: var(--sx-space-6) var(--g) var(--sx-space-10); }
.sx-mobile__foot .sx-navlinks { margin-inline: calc(-1 * var(--sx-space-3)); }
.sx-mobile__cta { justify-content: space-between; }
html.sx-menu-open { overflow: hidden; }
@media (min-width: 1024px) { .sx-mobile { display: none; } }

/* ---------- Sezioni ----------------------------------------------------- */
.sx-section { border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-headline { display: grid; gap: var(--sx-space-4); padding: var(--sx-space-16) var(--g) var(--sx-space-12); }
.sx-headline--split { align-items: end; }
.sx-headline__side { display: grid; justify-items: start; gap: var(--sx-space-6); max-width: 60ch; }
@media (min-width: 1024px) {
  .sx-headline { padding-top: var(--sx-space-24); }
  .sx-headline--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sx-space-16); }
}
.sx-cells { display: grid; gap: var(--sx-border-hairline); background: var(--sx-line); border-top: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 768px) {
  .sx-cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .sx-cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sx-cell { display: grid; align-content: start; gap: var(--sx-space-3); min-height: 280px; padding: var(--sx-space-6) var(--sx-space-5) var(--sx-space-10); background: var(--sx-bg); }
.sx-cell__icon { display: block; width: 48px; height: 48px; margin-bottom: var(--sx-space-10); color: var(--sx-fg); }
.sx-cell__icon .sx-px { width: 48px; height: 48px; }
.sx-cell__text { color: var(--sx-fg-2); }

/* ---------- Footer ------------------------------------------------------ */
/* Footer unico dal kit comune: packages/site-kit/assets/footer.css, aggiunto da build.py (D-043). */

/* Footer unico dei siti SPUN: packages/site-kit/assets/footer.css (D-043) */
/* Footer unico dei siti SPUN (packages/site-kit, D-043): uguale su spun.ai e su ogni sito prodotto.
   Generato da site_kit.footer_html(); sul modello di spun.tel (DESIGN_SYSTEM §10 e §15).
   Variabili proprie con ripiego: i token di spun.ai (--sx-*) o le variabili delle landing (--bg, --text, --rule…),
   così lo stesso file funziona ovunque senza toccare il CSS del sito.
   Ogni regola parte da .sx-footer e il logo e le icone hanno classi proprie (niente .sx-logo o .sx-px):
   così le regole generiche dei siti (per esempio .sx-chat .sx-px) non entrano nel footer. */
.sx-footer {
  --kf-bg: var(--sx-bg, var(--bg, #FAFAF4));
  --kf-fg: var(--sx-fg, var(--text, #101013));
  --kf-fg-2: var(--sx-fg-2, var(--text-2, #6D6D78));
  --kf-line: var(--sx-line, var(--rule, rgba(16, 16, 19, .12)));
  --kf-surface: var(--sx-surface, var(--surface, var(--soft, rgba(16, 16, 19, .04))));
  --kf-surface-2: var(--sx-surface-2, var(--soft, rgba(16, 16, 19, .06)));
  --kf-focus: var(--sx-focus, var(--focus, #1F3DFF));
  --kf-mono: var(--font-mono, "Space Mono", ui-monospace, monospace);
  --kf-g: 16px;
  border-top: 1px solid var(--kf-line);
  color: var(--kf-fg);
}
@media (min-width: 1024px) { .sx-footer { --kf-g: 40px; } }
.sx-footer :where(h2, h3, p, ul, li) { margin: 0; padding: 0; }
.sx-footer :where(ul) { list-style: none; }
.sx-footer :where(a) { color: inherit; text-decoration: none; }
.sx-footer :where(button) { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.sx-footer :where(a, button):focus-visible { outline: 2px solid var(--kf-focus); outline-offset: 2px; }
.sx-footer .sx-footer__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Colonne a celle: 2 sul telefono, tutte in fila da 1024px. */
.sx-footer .sx-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--kf-line); }
@media (min-width: 1024px) { .sx-footer .sx-footer__cols { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.sx-footer .sx-footer__col { display: flex; flex-direction: column; gap: 12px; padding: 32px var(--kf-g); background: var(--kf-bg); }
@media (min-width: 1024px) { .sx-footer .sx-footer__col { padding: 40px var(--kf-g); } }
.sx-footer .sx-footer__title, .sx-footer .sx-footer__ecolabel {
  font-family: var(--kf-mono); font-size: 12px; line-height: 16px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--kf-fg-2);
}
.sx-footer .sx-footer__col ul { display: flex; flex-direction: column; gap: 6px; }
.sx-footer .sx-footer__col a, .sx-footer .sx-footer__row { font-size: 14px; line-height: 20px; font-weight: 500; }
.sx-footer .sx-footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Riga del marchio: logo e claim a sinistra (claim sotto sul telefono, accanto dopo un filetto da 768px),
   certificazioni a destra, tutte alla stessa altezza. */
.sx-footer .sx-footer__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px var(--kf-g); border-block: 1px solid var(--kf-line);
}
.sx-footer .sx-footer__id { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sx-footer .sx-footer__brand { display: block; color: var(--kf-fg); }
.sx-footer .sx-footer__logo { display: block; width: 132px; height: auto; }
.sx-footer .sx-footer__claim span { display: block; color: var(--kf-fg-2); }
@media (min-width: 768px) {
  .sx-footer .sx-footer__id { flex-direction: row; align-items: center; gap: 24px; }
  .sx-footer .sx-footer__claim { padding-left: 24px; border-left: 1px solid var(--kf-line); }
}
.sx-footer .sx-footer__certlist { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-footer .sx-footer__cert { display: block; border-radius: 999px; transition: transform .15s; }
.sx-footer .sx-footer__cert:hover { transform: translateY(-2px); }
.sx-footer .sx-footer__cert img { display: block; width: auto; height: 44px; }
@media (min-width: 768px) {
  .sx-footer .sx-footer__certlist { gap: 16px; }
  .sx-footer .sx-footer__cert img { height: 64px; }
}

/* Nastro dell'ecosistema: prodotto in chiaro, famiglia in mono. Il secondo giro chiude il loop;
   si ferma al passaggio e con il fuoco da tastiera. */
.sx-footer .sx-footer__eco { display: flex; overflow: hidden; border-bottom: 1px solid var(--kf-line); }
.sx-footer .sx-footer__ecolabel { display: flex; flex: none; align-items: center; padding: 0 24px; border-right: 1px solid var(--kf-line); }
@media (max-width: 767px) {
  .sx-footer .sx-footer__ecolabel { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.sx-footer .sx-footer__ecoview { flex: 1; min-width: 0; overflow: hidden; }
.sx-footer .sx-footer__ecomove { display: flex; width: max-content; animation: sx-kit-marquee 60s linear infinite; }
.sx-footer .sx-footer__eco:hover .sx-footer__ecomove, .sx-footer .sx-footer__eco:focus-within .sx-footer__ecomove { animation-play-state: paused; }
.sx-footer .sx-footer__ecotrack { display: flex; }
.sx-footer .sx-footer__ecolink {
  display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-right: 1px solid var(--kf-line);
  white-space: nowrap; font-size: 14px; line-height: 20px; transition: background-color .15s;
}
.sx-footer .sx-footer__ecolink b { font-weight: 500; }
.sx-footer .sx-footer__ecolink span {
  font-family: var(--kf-mono); font-size: 10px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--kf-fg-2);
}
.sx-footer .sx-footer__ecolink:hover { background: var(--kf-surface); }
@keyframes sx-kit-marquee { to { transform: translateX(-50%); } }

/* Riga finale: società a sinistra; social e tema a destra. */
.sx-footer .sx-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--kf-g); }
.sx-footer .sx-footer__legal { font-size: 13px; line-height: 20px; color: var(--kf-fg-2); }
.sx-footer .sx-footer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sx-footer .sx-footer__social { display: flex; gap: 4px; }
.sx-footer .sx-footer__social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--kf-fg-2); transition: color .15s, background-color .15s; }
.sx-footer .sx-footer__social a:hover { color: var(--kf-fg); background: var(--kf-surface); }
.sx-footer .sx-footer__social svg { display: block; width: 18px; height: 18px; }
.sx-footer .sx-footer__theme { display: inline-flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--kf-surface-2); }
.sx-footer .sx-footer__opt { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; color: var(--kf-fg-2); }
.sx-footer .sx-footer__opt svg { display: block; width: 16px; height: 16px; }
.sx-footer .sx-footer__opt:hover { color: var(--kf-fg); }
.sx-footer .sx-footer__opt[aria-checked="true"] { background: var(--kf-bg); color: var(--kf-fg); }
.sx-footer .sx-footer__note { padding: 0 var(--kf-g) 16px; font-size: 13px; line-height: 20px; color: var(--kf-fg-2); }
.sx-footer .sx-footer__note a { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sx-footer .sx-footer__ecomove { width: auto; animation: none; }
  .sx-footer .sx-footer__ecotrack { flex-wrap: wrap; }
  .sx-footer .sx-footer__ecotrack[aria-hidden="true"] { display: none; }
  .sx-footer .sx-footer__cert, .sx-footer .sx-footer__ecolink, .sx-footer .sx-footer__social a { transition: none; }
  .sx-footer .sx-footer__cert:hover { transform: none; }
}

}
@layer components {
/* Componenti. Misure allineate al riferimento spun-mistral a 1440px, valori solo da token. */

/* ---------- Bottoni ----------------------------------------------------- */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sx-space-4);
  border-radius: var(--sx-radius-button); font-weight: 500; white-space: nowrap; transition: background-color .15s;
}
.sx-btn--large {
  min-height: var(--sx-component-button-height); padding: var(--sx-space-2) var(--sx-space-4);
  font-size: var(--sx-type-button-large-size); line-height: var(--sx-type-button-large-lh); letter-spacing: var(--sx-type-button-large-track);
}
.sx-btn--small {
  min-height: 40px; padding: var(--sx-space-2) var(--sx-space-3);
  font-size: var(--sx-type-button-small-size); line-height: var(--sx-type-button-small-lh); letter-spacing: var(--sx-type-button-small-track);
}
.sx-btn--light { background: var(--sx-btn-bg); color: var(--sx-btn-fg); }
.sx-btn--light:hover { background: color-mix(in srgb, var(--sx-btn-bg) 86%, var(--sx-btn-fg)); }
.sx-btn--dark { background: var(--sx-ink); color: var(--sx-paper); }
.sx-btn--dark:hover { background: var(--sx-ink-2); }
/* Secondario: fondo trasparente al 5–10% (DESIGN_SYSTEM §10). */
.sx-btn--ghost { background: color-mix(in srgb, var(--sx-fg) calc(var(--sx-component-secondary-bg-min) * 100%), transparent); color: var(--sx-fg); }
.sx-btn--ghost:hover { background: color-mix(in srgb, var(--sx-fg) calc(var(--sx-component-secondary-bg-max) * 100%), transparent); }
.sx-btn__arrow { display: grid; width: 16px; height: 16px; }
.sx-btn__arrow .sx-arrow { width: 16px; height: 16px; transition: transform .2s steps(2, jump-none); }
.sx-btn:hover .sx-arrow { transform: translateX(4px); }
.sx-iconbtn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--sx-radius-button);
  background: color-mix(in srgb, var(--sx-fg) calc(var(--sx-component-secondary-bg-min) * 100%), transparent); color: var(--sx-fg);
  transition: background-color .15s;
}
.sx-iconbtn .sx-arrow { width: 16px; height: 16px; }
.sx-iconbtn:hover { background: color-mix(in srgb, var(--sx-fg) calc(var(--sx-component-secondary-bg-max) * 100%), transparent); }
.sx-iconbtn:disabled { opacity: .4; cursor: default; }

/* ---------- Carosello --------------------------------------------------- */
/* minmax(0, 1fr): senza, la colonna implicita cresce quanto tutte le schede insieme. */
.sx-carousel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sx-carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.sx-carousel__track::-webkit-scrollbar { display: none; }
.sx-carousel__slide { min-width: 0; scroll-snap-align: start; }
.sx-carousel__arrows { display: flex; gap: var(--sx-space-2); }

/* ---------- Hero della home --------------------------------------------- */
/* Griglia ferma: titolo e mosaico a sinistra, frase e "In evidenza" a destra.
   Con .is-expand (assets/js/hero-expand.js) la sezione resta ferma per un'altezza di schermo:
   la colonna sinistra si chiude, la cella della frase si allarga fino a riempirla. --e va da 0 a 1. */
/* L'hero segue il tema della pagina (D-038): fondo e testo dai token del tema attivo. */
.sx-hero { --e: 0; background: var(--sx-bg); color: var(--sx-fg); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-hero__stage { display: flex; flex-direction: column; }
.sx-hero__left { display: contents; }
.sx-hero__title { order: 1; display: flex; align-items: flex-end; padding: var(--sx-space-12) var(--g) var(--sx-space-10); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-hero__title .sx-display { text-wrap: wrap; }
.sx-hero__side { order: 2; display: flex; align-items: flex-end; padding: var(--sx-space-8) var(--g); background: var(--sx-bg); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-hero__statement { display: grid; width: fit-content; gap: var(--sx-space-2); }
.sx-hero__icons { display: flex; justify-content: center; gap: var(--sx-space-2); color: var(--sx-fg); }
.sx-hero__icons .sx-px { width: 24px; height: 24px; }
/* Stessa proporzione dell'H2 (60/56), a misura di H5: la frase ingrandita diventa un H2. */
.sx-hero__lead { font-size: var(--sx-type-h5-size); line-height: 1.07; font-weight: 500; letter-spacing: var(--sx-type-h2-track); }
.sx-hero__line { display: block; width: fit-content; }
.sx-hero__media { order: 3; position: relative; min-height: 360px; overflow: hidden; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-hero__news { order: 4; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.sx-hero__scroll { display: grid; justify-items: start; gap: var(--sx-space-2); padding: var(--sx-space-10) var(--g); color: var(--sx-fg); }
.sx-hero__scroll .sx-arrow { width: 16px; height: 16px; animation: sx-scrollhint 2.4s steps(1, end) infinite; }
.sx-hero__scroll .sx-arrow:nth-child(2) { animation-delay: .3s; }
.sx-hero__scroll .sx-arrow:nth-child(3) { animation-delay: .6s; }
@keyframes sx-scrollhint { 0%, 100% { opacity: .25; } 30%, 70% { opacity: 1; } }
.sx-hero__newsinner { display: grid; gap: var(--sx-space-2); padding: var(--sx-space-10) var(--g); }
@media (min-width: 1024px) {
  /* L'hero parte da sotto la nav fissa, come una pagina a tutto schermo. */
  .sx-hero { margin-top: calc(-1 * var(--sx-layout-nav-height)); }
  .sx-hero__stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); grid-template-rows: max(420px, 60svh) max(300px, 40svh); }
  .sx-hero__title {
    grid-area: 1 / 1; padding: calc(var(--sx-layout-nav-height) + var(--sx-space-6)) 0 var(--sx-space-10) var(--g);
    border-right: var(--sx-border-hairline) solid var(--sx-line);
  }
  .sx-hero__media { grid-area: 2 / 1; min-height: 0; border-bottom: 0; border-right: var(--sx-border-hairline) solid var(--sx-line); }
  .sx-hero__side { grid-area: 1 / 2; padding: var(--sx-space-8); }
  .sx-hero__news { grid-area: 2 / 2; }
  .sx-hero__scroll, .sx-hero__newsinner { padding-inline: var(--sx-space-10); }

  .sx-hero.is-expand { height: 200svh; }
  .sx-hero.is-expand .sx-hero__stage { position: sticky; top: 0; display: block; height: 100svh; overflow: hidden; container-type: inline-size; }
  .sx-hero.is-expand .sx-hero__left {
    position: absolute; inset: 0 auto 0 0; display: grid; grid-template-rows: 60% 40%; overflow: hidden;
    width: calc(70% * (1 - var(--e))); translate: 0 calc(-50% * var(--e));
  }
  .sx-hero.is-expand .sx-hero__title, .sx-hero.is-expand .sx-hero__media { width: 70cqw; }
  /* Il titolo sale al doppio della colonna: altro mezzo schermo, cioè 5/6 della sua riga (60%). */
  .sx-hero.is-expand .sx-hero__title { translate: 0 calc(-83.333% * var(--e)); }
  .sx-hero.is-expand .sx-hero__side {
    position: absolute; z-index: 1; top: 0; right: 0; left: calc(70% * (1 - var(--e))); display: block;
    height: calc(60% + 40% * var(--e)); padding: 0; border-bottom: 0; box-shadow: calc(-1 * var(--sx-border-hairline)) 0 0 var(--sx-line);
  }
  .sx-hero.is-expand .sx-hero__statement { position: absolute; left: 0; top: 0; width: max-content; gap: 0; padding: var(--sx-space-20); transform-origin: 0 0; }
  .sx-hero.is-expand .sx-hero__icons { gap: var(--sx-space-4); }
  .sx-hero.is-expand .sx-hero__icons .sx-px { width: 56px; height: 56px; }
  .sx-hero.is-expand .sx-hero__lead { font-size: var(--sx-type-h2-size); line-height: var(--sx-type-h2-lh); }
  /* Le righe passano da allineate a sinistra a centrate: metà dello spazio libero, calcolata sulla riga stessa. */
  .sx-hero.is-expand .sx-hero__line { margin-left: calc(50% * var(--e)); translate: calc(-50% * var(--e)) 0; white-space: nowrap; }
  .sx-hero.is-expand .sx-hero__news { position: absolute; top: 60%; bottom: 0; left: calc(70% * (1 - var(--e))); width: 30%; }
  .sx-hero.is-expand .sx-hero__scroll { translate: 0 calc(-100% * var(--e)); }
  .sx-hero.is-expand .sx-hero__newsinner { translate: 0 calc(100% * var(--e)); }
}
/* Senza JS il canvas resta vuoto: campo cobalt con grana, etichette ferme agli angoli. */
html:not(.sx-js) .sx-pixel-hero { background-image: var(--sx-grain); }
html:not(.sx-js) .sx-ph-label[data-corner="top-right"] { left: auto; right: var(--sx-space-4); top: var(--sx-space-4); }
html:not(.sx-js) .sx-ph-label[data-corner="bottom-left"] { top: auto; left: var(--sx-space-4); bottom: var(--sx-space-4); }

.sx-newsbox {
  grid-template-columns: minmax(0, 1fr) 42px; overflow: hidden;
  border: var(--sx-border-hairline) solid var(--sx-line); border-radius: var(--sx-radius-button); background: var(--sx-bg);
}
html:not(.sx-js) .sx-newsbox { grid-template-columns: minmax(0, 1fr); }
.sx-newsitem { display: flex; align-items: center; gap: var(--sx-space-4); height: 100%; padding: var(--sx-space-2); }
.sx-newsitem__thumb { flex: none; width: 64px; height: 64px; border-radius: var(--sx-radius-button); overflow: hidden; }
.sx-newsitem__thumb .sx-px { width: 32px; height: 32px; }
/* Due righe al massimo: la scheda resta alta uguale per tutte le notizie (il testo intero resta nel link). */
.sx-newsitem__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: var(--sx-type-button-large-size); line-height: var(--sx-type-button-large-lh); font-weight: 500;
}
.sx-newsbox__nav { display: grid; grid-template-rows: 1fr 1fr; border-left: var(--sx-border-hairline) solid var(--sx-line); }
.sx-newsbox__nav .sx-iconbtn { width: 100%; height: 100%; border-radius: 0; background: none; }
.sx-newsbox__nav .sx-iconbtn:hover { background: var(--sx-surface); }
.sx-newsbox__nav .sx-iconbtn + .sx-iconbtn { border-top: var(--sx-border-hairline) solid var(--sx-line); }

/* ---------- Ecosistema -------------------------------------------------- */
.sx-eco { overflow: hidden; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-eco__viewport { display: flex; width: max-content; animation: sx-marquee 70s linear infinite; }
.sx-eco:hover .sx-eco__viewport { animation-play-state: paused; }
.sx-eco__track { display: flex; }
.sx-eco__cell {
  display: grid; place-items: center; flex: none; width: 160px; height: 160px;
  border-right: var(--sx-border-hairline) solid var(--sx-line); white-space: nowrap;
  font-size: var(--sx-type-button-large-size); font-weight: 500; letter-spacing: -0.01em;
}
.sx-eco__cell { align-content: center; gap: var(--sx-space-4); }
.sx-eco__icon { display: grid; place-items: center; width: 40px; height: 40px; background: var(--f); color: var(--k); }
.sx-eco__icon .sx-px { width: 20px; height: 20px; }
/* L'estensione nel colore del prodotto. I campi chiari (bio, cloud, menu…) sul fondo carta non si leggerebbero:
   la tinta resta, la luminosità scende in chiaro e sale in scuro (il tema scuro c'è solo con data-theme, D-027).
   Senza il colore relativo resta il grigio. */
.sx-eco__cell b { font-weight: 500; color: var(--sx-fg-2); color: oklch(from var(--f) min(l, 0.52) max(c, 0.12) h); }
:root[data-theme="dark"] .sx-eco__cell b { color: var(--sx-fg-2); color: oklch(from var(--f) max(l, 0.78) c h); }
@media (min-width: 1024px) {
  .sx-eco__cell { width: 272px; height: 272px; font-size: var(--sx-type-h5-size); }
  .sx-eco__icon { width: 56px; height: 56px; }
  .sx-eco__icon .sx-px { width: 28px; height: 28px; }
}
@keyframes sx-marquee { to { transform: translateX(-50%); } }

/* ---------- Progetti ---------------------------------------------------- */
.sx-stories { padding: var(--sx-space-20) 0; background: var(--sx-surface); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-carousel--stories { gap: var(--sx-space-10); }
.sx-stories__row { padding-left: var(--g); border-block: var(--sx-border-hairline) solid var(--sx-line); }
.sx-carousel--stories .sx-carousel__track { grid-auto-columns: min(1044px, calc(100vw - 2 * var(--g) - var(--sx-space-6))); gap: var(--sx-space-2); }
.sx-carousel--stories .sx-carousel__nav { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--g); }
.sx-dots {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--sx-space-3); border-radius: var(--sx-radius-button);
  background: color-mix(in srgb, var(--sx-fg) calc(var(--sx-component-secondary-bg-min) * 100%), transparent);
}
.sx-dots__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--sx-fg-3); transition: width .3s steps(4, end), background-color .3s; }
.sx-dots__dot.is-active { width: 32px; background: var(--sx-fg); }
.sx-story { position: relative; height: 480px; overflow: hidden; isolation: isolate; border-radius: var(--sx-radius-window); background: var(--f, var(--sx-bg)); }
.sx-story .sx-story-art { z-index: 0; }
.sx-story__body {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  width: 100%; height: 100%; padding: var(--sx-space-8); color: var(--sx-paper);
  background: linear-gradient(to right, color-mix(in srgb, var(--sx-ink) 50%, transparent) 25%, transparent);
}
@media (min-width: 768px) { .sx-story__body { width: 50%; } }
.sx-story__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sx-space-2); }
.sx-story__mark {
  display: flex; align-items: center; gap: var(--sx-space-2); font-family: var(--font-mono);
  font-size: var(--sx-type-eyebrow-size); line-height: var(--sx-type-eyebrow-lh); letter-spacing: var(--sx-type-eyebrow-track); text-transform: uppercase;
}
.sx-story__mark .sx-px { width: 16px; height: 16px; }
.sx-story__chip { background: var(--sx-ink); color: var(--sx-paper); }
.sx-story--photo .sx-story__chip { background: var(--sx-paper); color: var(--sx-ink); }   /* come le card clienti di Mistral */
.sx-story--photo .sx-btn--light { background: var(--sx-paper); color: var(--sx-ink); }
.sx-story--photo .sx-btn--light:hover { background: var(--sx-paper-2); }
.sx-story__title { max-width: 460px; margin-top: var(--sx-space-3); font-size: var(--sx-type-h4-size); line-height: var(--sx-type-h4-lh); font-weight: 500; }
/* News nella home (al posto dei progetti): foto a tutta card sotto il testo, con una sfumatura più piena. */
.sx-stories__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sx-space-4); padding: 0 var(--g) var(--sx-space-6); }
.sx-stories__all { display: inline-flex; align-items: center; gap: var(--sx-space-2); font-weight: 500; }
.sx-stories__all .sx-arrow { width: 16px; height: 16px; transition: translate .2s steps(2, jump-none); }
.sx-stories__all:hover .sx-arrow { translate: 4px 0; }
.sx-story-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-story--news .sx-story__body {
  background: linear-gradient(to right, color-mix(in srgb, var(--sx-ink) 74%, transparent), color-mix(in srgb, var(--sx-ink) 46%, transparent) 62%, transparent);
}
@media (max-width: 767px) {
  .sx-story--news .sx-story__body { background: linear-gradient(to top, color-mix(in srgb, var(--sx-ink) 84%, transparent) 35%, color-mix(in srgb, var(--sx-ink) 25%, transparent)); }
}

/* ---------- Prodotti: titolo e composizione di tessere ------------------ */
.sx-headline--center { justify-items: center; text-align: center; }
.sx-headline--products { padding: var(--sx-space-24) var(--g) var(--sx-space-10); border-top: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 1024px) { .sx-headline--products { padding-top: calc(2 * var(--sx-space-20)); } }
.sx-mark__wrap { padding: var(--sx-space-10) var(--g) var(--sx-space-16); }
.sx-mark { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sx-border-hairline); background: var(--sx-line); border: var(--sx-border-hairline) solid var(--sx-line); }
.sx-mark__deco { display: none; }
.sx-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--f, var(--sx-surface)); }
.sx-tile--wide { grid-column: span 2; aspect-ratio: 2; }
.sx-tile__panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: var(--sx-space-3); background: var(--sx-bg); border: var(--sx-border-hairline) solid var(--sx-line);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.sx-tile:hover .sx-tile__panel, .sx-tile:focus-visible .sx-tile__panel { transform: translateX(calc(-1 * var(--sx-space-10))); }
.sx-tile__icon { display: grid; place-items: center; width: 32px; height: 32px; background: var(--f, transparent); color: var(--k, var(--sx-fg)); }
.sx-tile__icon .sx-px { width: 16px; height: 16px; }
.sx-tile--plain .sx-tile__icon { width: auto; justify-items: start; }
.sx-tile__text { display: grid; }
.sx-tile__title { font-size: var(--sx-type-h5-size); line-height: var(--sx-type-h5-lh); font-weight: 500; }
.sx-tile__sub { font-size: var(--sx-type-small-size); line-height: var(--sx-type-small-lh); }
@media (min-width: 1024px) {
  .sx-mark__wrap { padding: 0 var(--g); }
  .sx-mark { position: relative; display: block; width: min(100%, calc(var(--mw) * 1px)); aspect-ratio: var(--mw) / var(--mh); margin-inline: auto; background: none; border: 0; }
  .sx-mark > * {
    position: absolute; aspect-ratio: auto;
    left: calc(var(--x) / var(--mw) * 100%); top: calc(var(--y) / var(--mh) * 100%);
    width: calc(var(--w) / var(--mw) * 100%); height: calc(var(--h) / var(--mh) * 100%);
  }
  .sx-mark__deco { display: block; background: var(--sx-surface); border: var(--sx-border-hairline) solid var(--sx-line); }
  .sx-mark__deco--block { background: var(--sx-surface-2); border-color: color-mix(in srgb, var(--sx-surface-2), var(--sx-fg-3) 40%); }
  .sx-mark__deco--diamond { transform: rotate(45deg); }
}
.sx-js [data-reveal] > * { opacity: 0; translate: 0 calc(-1 * var(--sx-space-6)); transition: opacity .5s, translate .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.sx-js [data-reveal].is-in > * { opacity: 1; translate: 0 0; }

/* ---------- Prodotti: indice e card ------------------------------------- */
.sx-catalog { display: grid; border-top: var(--sx-border-hairline) solid var(--sx-line); }
.sx-rail { display: none; }
.sx-rail__link {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--sx-radius-button);
  background: var(--f, color-mix(in srgb, var(--sx-fg) calc(var(--sx-component-secondary-bg-min) * 100%), transparent)); color: var(--k, var(--sx-fg));
  transition: background-color .2s, color .2s;
}
.sx-rail__link .sx-px { width: 16px; height: 16px; }
.sx-rail__link:hover { outline: 1px solid var(--sx-fg); outline-offset: 2px; }
.sx-rail__link[aria-current="true"] { outline: 2px solid var(--sx-fg); outline-offset: 2px; }
.sx-catalog__cards { min-width: 0; }
.sx-pcard { background: var(--sx-bg); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-pcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sx-space-4); padding: var(--sx-space-6) var(--g); }
.sx-pcard__heading { display: grid; }
.sx-pcard__name { font-size: var(--sx-type-button-small-size); line-height: var(--sx-type-button-small-lh); color: var(--sx-fg-2); }
.sx-pcard__body { display: flex; flex-direction: column; gap: var(--sx-space-6); padding: var(--sx-space-6) var(--g); border-top: var(--sx-border-hairline) solid var(--sx-line); }
.sx-pcard__text { font-size: var(--sx-type-body-large-size); line-height: var(--sx-type-body-large-lh); letter-spacing: var(--sx-type-body-large-track); }
.sx-pcard__chips { display: flex; flex-wrap: wrap; gap: var(--sx-space-2); }
@media (min-width: 1024px) {
  .sx-catalog { grid-template-columns: repeat(10, minmax(0, 1fr)); padding-inline: var(--g); }
  /* L'indice entra dal basso quando il catalogo è già in vista, poi resta fermo a filo del fondo dello schermo.
     --rail-h: n icone da 36px con 8px tra l'una e l'altra, più 16px sopra e sotto. */
  .sx-rail { --rail-h: calc(var(--n, 6) * 44px + 24px); display: block; grid-column: 1 / span 2; }
  .sx-rail ul {
    position: sticky; top: calc(100svh - var(--rail-h) - var(--sx-space-2)); margin-top: calc(100svh - var(--rail-h) - var(--sx-space-2));
    display: grid; justify-items: start; gap: var(--sx-space-2); padding: var(--sx-space-4);
  }
  .sx-catalog__cards { grid-column: 3 / span 8; border-inline: var(--sx-border-hairline) solid var(--sx-line); }
  .sx-pcard__head, .sx-pcard__body { padding: var(--sx-space-6); }
}

/* ---------- Servizi ------------------------------------------------------ */
.sx-headline--services { justify-items: stretch; gap: var(--sx-space-10); padding: var(--sx-space-10) var(--g) 0; }
.sx-headline__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sx-space-6) var(--sx-space-10); }
.sx-headline__row > p { flex: 1 1 320px; }
.sx-slides { display: grid; margin: var(--sx-space-10) var(--g); border-top: var(--sx-border-hairline) solid var(--sx-line); border-left: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 768px) { .sx-slides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sx-slides { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sx-slide {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px;
  background: var(--sx-surface); border-right: var(--sx-border-hairline) solid var(--sx-line); border-bottom: var(--sx-border-hairline) solid var(--sx-line);
  transition: background-color .3s;
}
.sx-slide:focus-visible { outline-offset: -2px; }
.sx-slide__photo { aspect-ratio: 4 / 3; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-slide__icon { display: block; padding: var(--sx-space-6) var(--sx-space-6) 0; }
.sx-slide__icon .sx-px { width: 32px; height: 32px; }
.sx-slide__body { display: grid; gap: var(--sx-space-4); padding: var(--sx-space-6); }
.sx-slide__title { font-size: var(--sx-type-h5-size); line-height: var(--sx-type-h5-lh); font-weight: 500; }
.sx-slide__bar { position: absolute; top: calc(-1 * var(--sx-border-hairline)); left: 0; width: 0; height: 4px; background: var(--sx-cobalt); }
@media (min-width: 1024px) {
  .sx-slide { min-height: 520px; justify-content: flex-start; }
  .sx-slide__body { margin-top: auto; }
  .sx-js .sx-slide__text { display: none; }
  .sx-js .sx-slide.is-active { background: var(--sx-bg); }
  .sx-js .sx-slide.is-active .sx-slide__text { display: block; animation: sx-in .35s both; }
  .sx-js .sx-slide.is-active .sx-slide__bar { animation: sx-bar 5s linear forwards; }
}
@keyframes sx-bar { to { width: 100%; } }

/* ---------- Privacy ------------------------------------------------------ */
.sx-headline--privacy { gap: var(--sx-space-10); padding: var(--sx-space-24) var(--g) 0; }
@media (min-width: 1024px) { .sx-headline--privacy { padding-top: calc(2 * var(--sx-space-20)); } }
.sx-headline--privacy .sx-eyebrow { color: var(--sx-fg); }
.sx-headline--center .sx-h2 { max-width: 1024px; }
.sx-privacy__icons { display: flex; justify-content: center; gap: var(--sx-space-4); }
.sx-privacy__icons .sx-px { width: 56px; height: 56px; }
.sx-pcells__row { margin-block: var(--sx-space-10); padding-inline: var(--g); border-block: var(--sx-border-hairline) solid var(--sx-line); }
.sx-pcells { display: grid; border-left: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 768px) { .sx-pcells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sx-pcell {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sx-space-10);
  padding: var(--sx-space-10); border-right: var(--sx-border-hairline) solid var(--sx-line); border-bottom: var(--sx-border-hairline) solid var(--sx-line);
}
.sx-pcell__photo { aspect-ratio: 16 / 9; margin: calc(-1 * var(--sx-space-10)) calc(-1 * var(--sx-space-10)) 0; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-pcell:last-child { border-bottom: 0; }
@media (min-width: 768px) { .sx-pcell { min-height: 364px; gap: var(--sx-space-10); border-bottom: 0; } }
.sx-pcell__top { display: grid; gap: var(--sx-space-6); }
.sx-pcell__icon .sx-px { width: 16px; height: 16px; }

/* ---------- Banda CTA --------------------------------------------------- */
.sx-cta { position: relative; isolation: isolate; overflow: hidden; background-color: var(--sx-cobalt); color: var(--sx-paper); }
.sx-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: var(--sx-grain); pointer-events: none; }
.sx-cta__inner {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sx-space-12);
  min-height: 380px; max-width: var(--sx-layout-max-width); margin-inline: auto; padding: var(--sx-space-10) var(--g) var(--sx-space-20);
}
.sx-cta__text { display: grid; gap: var(--sx-space-6); max-width: 672px; }
.sx-cta .sx-eyebrow { color: var(--sx-paper); }
.sx-cta__title { font-size: var(--sx-type-h3-size); line-height: var(--sx-type-h3-lh); letter-spacing: var(--sx-type-h3-track); font-weight: 500; }
.sx-cta__side { display: grid; justify-items: start; gap: var(--sx-space-4); }
@media (min-width: 1024px) { .sx-cta__side { justify-items: end; } }
/* Simbolo del logo con la scintilla (D-030, DESIGN_SYSTEM §3), proporzione 325.8 x 348.54. */
.sx-cta__symbol { display: block; width: 56px; height: 60px; color: var(--sx-paper); }
.sx-cta__symbol .sx-symbol { width: 100%; height: 100%; }
.sx-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--sx-space-2); }
.sx-cta .sx-btn--light { background: var(--sx-paper); color: var(--sx-ink); }
.sx-cta .sx-btn--light:hover { background: var(--sx-paper-2); }

/* ---------- News: indice, schede, pagina ---------------------------------- */
.sx-newsitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sx-newsitem__thumb--icon { display: grid; place-items: center; background: var(--f, var(--sx-surface)); color: var(--k, var(--sx-fg)); }

.sx-headline--news { gap: var(--sx-space-4); padding: var(--sx-space-24) var(--g) var(--sx-space-10); }
.sx-headline--news .sx-lead { max-width: 640px; color: var(--sx-fg-2); }
.sx-newsgrid { display: grid; border-top: var(--sx-border-hairline) solid var(--sx-line); border-left: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 768px) { .sx-newsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sx-newsgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: var(--g); } }
.sx-newscard { background: var(--sx-bg); border-right: var(--sx-border-hairline) solid var(--sx-line); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-newscard__link { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.sx-newscard__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sx-surface); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-newscard__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.4, 0, .2, 1); }
.sx-newscard__link:hover .sx-newscard__media img { scale: 1.04; }
.sx-newscard__media--icon { display: grid; place-items: center; background: var(--f, var(--sx-surface)); color: var(--k, var(--sx-fg)); }
.sx-newscard__media--icon .sx-px { width: 56px; height: 56px; }
.sx-newscard__body { display: flex; flex-direction: column; gap: var(--sx-space-3); padding: var(--sx-space-6); }
.sx-newscard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sx-space-2); color: var(--sx-fg-2);
  font-family: var(--font-mono); font-size: var(--sx-type-chip-size); line-height: var(--sx-type-chip-lh); text-transform: uppercase;
}
.sx-newscard__title { font-size: var(--sx-type-h5-size); line-height: var(--sx-type-h5-lh); font-weight: 500; }
.sx-newscard__lead { color: var(--sx-fg-2); }
.sx-newscard__arrow { margin-top: auto; color: var(--sx-fg-2); transition: color .2s, translate .2s steps(2, jump-none); }
.sx-newscard__arrow .sx-arrow { width: 16px; height: 16px; }
.sx-newscard__link:hover .sx-newscard__arrow { color: var(--sx-fg); translate: 4px -4px; }

.sx-crumbs {
  display: flex; flex-wrap: wrap; gap: var(--sx-space-2); padding: var(--sx-space-4) var(--g);
  border-bottom: var(--sx-border-hairline) solid var(--sx-line); color: var(--sx-fg-2);
  font-family: var(--font-mono); font-size: var(--sx-type-chip-size); line-height: var(--sx-type-chip-lh); text-transform: uppercase;
}
.sx-crumbs a:hover { color: var(--sx-fg); text-decoration: underline; text-underline-offset: 3px; }
.sx-crumbs span::before { content: "/"; margin-right: var(--sx-space-2); }
.sx-article__head { display: grid; gap: var(--sx-space-4); max-width: 1024px; padding: var(--sx-space-16) var(--g) var(--sx-space-10); }
.sx-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sx-space-3); color: var(--sx-fg-2); font-family: var(--font-mono); font-size: var(--sx-type-eyebrow-size); line-height: var(--sx-type-eyebrow-lh); letter-spacing: var(--sx-type-eyebrow-track); text-transform: uppercase; }
.sx-article__media { margin: 0; padding-inline: var(--g); }
.sx-article__figure { display: block; overflow: hidden; border-radius: var(--sx-radius-window); background: var(--sx-surface); }
.sx-article__figure img { width: 100%; height: auto; }
.sx-article__figure--icon { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--f, var(--sx-surface)); color: var(--k, var(--sx-fg)); }
.sx-article__body { display: grid; gap: var(--sx-space-6); max-width: 760px; padding: var(--sx-space-12) var(--g) var(--sx-space-6); font-size: var(--sx-type-body-large-size); line-height: var(--sx-type-body-large-lh); letter-spacing: var(--sx-type-body-large-track); }
.sx-article__body .sx-h4 { margin-top: var(--sx-space-6); }
.sx-article__quote { margin: 0; padding-left: var(--sx-space-6); border-left: 2px solid var(--sx-cobalt); font-size: var(--sx-type-h5-size); line-height: var(--sx-type-h5-lh); }
.sx-article__list { display: grid; gap: var(--sx-space-2); padding-left: 1.2em; list-style: disc; }
.sx-article__extra { display: grid; gap: var(--sx-space-4); max-width: 760px; padding: var(--sx-space-6) var(--g); }
.sx-article__links { display: flex; flex-wrap: wrap; gap: var(--sx-space-2); }
.sx-article__back { padding: var(--sx-space-10) var(--g) var(--sx-space-16); }
.sx-more { border-top: var(--sx-border-hairline) solid var(--sx-line); }
.sx-headline--others { padding: var(--sx-space-16) var(--g) var(--sx-space-6); }

/* ---------- Famiglie: tessere e prodotti (D-036, colori D-037) ----------- */
/* Tessera di famiglia: sotto il pannello una striscia per prodotto, che si vede al passaggio. */
.sx-tile--family { background: var(--stripes, var(--sx-surface)); }
.sx-tile__icons { display: flex; flex-wrap: wrap; gap: var(--sx-space-1); }
.sx-tile--family .sx-tile__sub { color: var(--sx-fg-2); }


/* ---------- Sotto i 1024px ---------------------------------------------- */
/* Tablet e telefono seguono il riferimento: frase subito sotto il titolo, notizia su una riga,
   tessere a tutta larghezza, servizi in una fila che scorre. */
@media (max-width: 1023px) {
  .sx-hero__title { padding-top: var(--sx-space-20); padding-bottom: var(--sx-space-4); border-bottom: 0; }
  .sx-hero__side { padding: 0 var(--g) var(--sx-space-4); background: none; }
  .sx-hero__icons, .sx-hero__scroll { display: none; }
  .sx-hero__newsinner { gap: var(--sx-space-3); padding: var(--sx-space-4) var(--g); }
  .sx-hero__media { order: 5; min-height: 210px; border-bottom: 0; }
  .sx-newsbox { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .sx-newsitem { padding: var(--sx-space-4); }
  .sx-newsitem__thumb { display: none; }
  .sx-newsitem__title { display: block; white-space: nowrap; text-overflow: ellipsis; }
  .sx-newsbox__nav { display: flex; padding-right: var(--sx-space-2); border-left: 0; }
  .sx-newsbox__nav .sx-iconbtn {
    width: 40px; height: 40px; border-radius: var(--sx-radius-button);
    background: color-mix(in srgb, var(--sx-fg) calc(var(--sx-component-secondary-bg-min) * 100%), transparent);
  }
  .sx-newsbox__nav [data-carousel-prev] { display: none; }

  .sx-mark > .sx-tile { grid-column: span 2; display: grid; aspect-ratio: auto; min-height: 120px; }
  .sx-mark > .sx-tile--half { grid-column: span 1; min-height: 160px; }
  .sx-tile__panel { position: relative; inset: auto; gap: var(--sx-space-6); }

  .sx-carousel--slides { gap: var(--sx-space-4); margin-block: var(--sx-space-10); }
  .sx-slides {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(320px, calc(100% - 2 * var(--g)));
    gap: var(--sx-space-2); margin: 0; padding-inline: var(--g); scroll-padding-inline: var(--g); border: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .sx-slides::-webkit-scrollbar { display: none; }
  .sx-slide { min-height: 360px; border: var(--sx-border-hairline) solid var(--sx-line); }
  .sx-slide__icon .sx-px { width: 56px; height: 56px; }
  .sx-carousel--slides .sx-carousel__nav { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--g); }
}
@media (min-width: 1024px) { .sx-carousel--slides .sx-carousel__nav { display: none; } }
@media (max-width: 767px) {
  .sx-hero__lead { font-size: var(--sx-type-h4-size); line-height: var(--sx-type-h4-lh); letter-spacing: normal; }
  .sx-story { height: 400px; }
  .sx-story__body { padding: var(--sx-space-4); }
  .sx-carousel--stories .sx-carousel__track { grid-auto-columns: calc(100vw - 2 * var(--g) - var(--sx-space-8)); }
  .sx-headline__row > .sx-btn { flex-basis: 100%; }
  .sx-pcell { gap: var(--sx-space-4); padding: var(--sx-space-6); }
  .sx-cta__inner { min-height: 0; gap: var(--sx-space-4); padding: var(--sx-space-12) var(--g) var(--sx-space-4); }
  .sx-cta__side { width: 100%; justify-items: stretch; gap: var(--sx-space-2); }
  .sx-cta__symbol { justify-self: end; width: 42px; height: 45px; }
  .sx-cta__buttons { display: grid; gap: var(--sx-space-3); }
  /* Card prodotto: titolo, testo, bottone, illustrazione, chip in colonna. */
  .sx-pcard { display: flex; flex-direction: column; }
  .sx-pcard__head, .sx-pcard__body { display: contents; }
  .sx-pcard__heading { order: 1; padding: var(--sx-space-6) var(--g); }
  .sx-pcard__text { order: 2; padding: var(--sx-space-6) var(--g) 0; border-top: var(--sx-border-hairline) solid var(--sx-line); }
  .sx-pcard__head > .sx-btn { order: 3; align-self: flex-start; margin: var(--sx-space-4) var(--g) 0; }
  .sx-pcard__media { order: 4; margin: var(--sx-space-6) var(--g) 0; }
  .sx-pcard__chips { order: 5; flex-direction: column; align-items: flex-start; padding: var(--sx-space-4) var(--g) var(--sx-space-6); }
  /* Progetti: categoria in alto, marchio, titolo e bottone in fondo alla card. */
  .sx-stories { padding-block: var(--sx-space-10); }
  .sx-story__body { justify-content: flex-start; }
  .sx-story__top { display: contents; }
  .sx-story__chip { order: 1; margin-bottom: auto; }
  .sx-story__mark { order: 2; }
  .sx-story__title { order: 3; margin-top: var(--sx-space-1); }
  .sx-story__body > .sx-btn { order: 4; margin-top: var(--sx-space-4); }
  .sx-headline--products, .sx-headline--privacy, .sx-headline--news { padding-top: var(--sx-space-16); }
  .sx-article__head { padding-top: var(--sx-space-10); }
  .sx-article__body { padding-block: var(--sx-space-8) var(--sx-space-4); font-size: var(--sx-type-body-size); line-height: var(--sx-type-body-lh); }
  .sx-slide__icon, .sx-slide__body { padding: var(--sx-space-4); }
}

/* ---------- Pagine interne: testata (contatti, progetti, 404) ------------ */
.sx-headline--page { gap: var(--sx-space-4); padding: var(--sx-space-24) var(--g) var(--sx-space-10); }
.sx-headline--page .sx-lead { max-width: 640px; color: var(--sx-fg-2); }

/* ---------- Azienda: testata, righe, cronologia, domini ------------------- */
.sx-phero { display: grid; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-phero__title { display: flex; align-items: flex-end; padding: var(--sx-space-20) var(--g) var(--sx-space-6); }
.sx-phero__side { display: flex; align-items: flex-end; padding: 0 var(--g) var(--sx-space-8); }
.sx-phero__media { position: relative; min-height: 240px; overflow: hidden; border-top: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 1024px) {
  .sx-phero { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .sx-phero__title { min-height: 420px; padding: var(--sx-space-24) var(--sx-space-10) var(--sx-space-10) var(--g); border-right: var(--sx-border-hairline) solid var(--sx-line); }
  .sx-phero__side { padding: var(--sx-space-8); }
  .sx-phero__media { grid-column: 1 / -1; min-height: 360px; }
}

.sx-row { display: grid; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-row__text { display: grid; align-content: center; gap: var(--sx-space-6); padding: var(--sx-space-16) var(--g); }
.sx-row__text .sx-lead { max-width: 56ch; color: var(--sx-fg-2); }
.sx-row__art { border-top: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 768px) {
  .sx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-row__art { border-top: 0; border-left: var(--sx-border-hairline) solid var(--sx-line); }
  .sx-row--flip .sx-row__art { order: -1; border-left: 0; border-right: var(--sx-border-hairline) solid var(--sx-line); }
}
@media (min-width: 1024px) { .sx-row__text { padding: var(--sx-space-20) var(--sx-space-16) var(--sx-space-20) var(--g); } }

.sx-timeline, .sx-ecogrid {
  display: grid; margin-bottom: var(--sx-space-16);
  border-top: var(--sx-border-hairline) solid var(--sx-line); border-left: var(--sx-border-hairline) solid var(--sx-line);
}
.sx-tlcard, .sx-ecogrid > li { background: var(--sx-bg); border-right: var(--sx-border-hairline) solid var(--sx-line); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-tlcard { display: grid; grid-template-rows: auto 1fr; }
.sx-tlcard__art { position: relative; aspect-ratio: 16 / 10; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-tlcard__text { display: grid; align-content: start; gap: var(--sx-space-3); padding: var(--sx-space-6); }
@media (min-width: 640px) { .sx-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sx-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: var(--g); } }

.sx-ecogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .sx-ecogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sx-ecogrid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-inline: var(--g); } }
.sx-ecogrid__link { position: relative; display: grid; align-content: space-between; gap: var(--sx-space-6); height: 100%; min-height: 136px; padding: var(--sx-space-4); transition: background-color .15s; }
.sx-ecogrid__link:hover { background: var(--sx-surface); }
.sx-ecogrid__domain { padding-right: var(--sx-space-5); overflow-wrap: anywhere; font-size: var(--sx-type-h5-size); line-height: var(--sx-type-h5-lh); font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 767px) { .sx-ecogrid__domain { font-size: var(--sx-type-button-large-size); line-height: var(--sx-type-button-large-lh); } }
.sx-ecogrid__domain b { font-weight: 500; color: var(--sx-fg-2); }
.sx-ecogrid__name { font-size: var(--sx-type-small-size); line-height: var(--sx-type-small-lh); color: var(--sx-fg-2); }
.sx-ecogrid__link .sx-arrow { position: absolute; top: var(--sx-space-4); right: var(--sx-space-4); width: 16px; height: 16px; color: var(--sx-fg-2); transition: translate .2s steps(2, jump-none); }
.sx-ecogrid__link:hover .sx-arrow { translate: 2px -2px; color: var(--sx-fg); }

/* ---------- Contatti: recapiti e modulo (mailto, nessun invio) ------------ */
.sx-contact__grid { display: grid; border-top: var(--sx-border-hairline) solid var(--sx-line); }
.sx-contact__info, .sx-contact__form { display: grid; align-content: start; gap: var(--sx-space-6); padding: var(--sx-space-10) var(--g) var(--sx-space-16); }
.sx-contact__form { border-top: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 1024px) {
  .sx-contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-contact__form { border-top: 0; border-left: var(--sx-border-hairline) solid var(--sx-line); padding-inline: var(--sx-space-10) var(--g); }
}
.sx-contact__cards { border: var(--sx-border-hairline) solid var(--sx-line); }
.sx-contact__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sx-space-4) var(--sx-space-5); padding: var(--sx-space-6); }
.sx-contact__card + .sx-contact__card { border-top: var(--sx-border-hairline) solid var(--sx-line); }
.sx-contact__icon .sx-px { width: 32px; height: 32px; }
.sx-contact__body { display: grid; gap: var(--sx-space-2); }
.sx-contact__text { display: grid; gap: var(--sx-space-1); color: var(--sx-fg-2); overflow-wrap: anywhere; }
.sx-contact__text a { color: var(--sx-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sx-contact__card > .sx-btn { grid-column: 2; justify-self: start; }

.sx-form { display: grid; gap: var(--sx-space-5); max-width: 640px; }
.sx-form__pair { display: grid; gap: var(--sx-space-5); }
@media (min-width: 640px) { .sx-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-field { display: grid; gap: var(--sx-space-2); }
.sx-field__label { font-size: var(--sx-type-h6-size); line-height: var(--sx-type-h6-lh); font-weight: 500; }
.sx-field__control {
  width: 100%; min-height: var(--sx-component-button-height); padding: var(--sx-space-3); margin: 0;
  border: var(--sx-border-hairline) solid var(--sx-line); border-radius: var(--sx-radius-button);
  background: var(--sx-bg); color: var(--sx-fg); font: inherit; letter-spacing: inherit;
  transition: border-color .15s;
}
textarea.sx-field__control { min-height: 168px; resize: vertical; }
.sx-field__control::placeholder { color: var(--sx-fg-3); opacity: 1; }
.sx-field__control:hover { border-color: var(--sx-fg-3); }
.sx-field__control:focus-visible { outline-offset: 0; border-color: var(--sx-fg); }
.sx-form__note { max-width: 60ch; font-size: var(--sx-type-small-size); line-height: var(--sx-type-small-lh); color: var(--sx-fg-2); }
.sx-form__submit { justify-self: start; }
.sx-form__done {
  font-family: var(--font-mono); font-size: var(--sx-type-eyebrow-size); line-height: var(--sx-type-eyebrow-lh);
  letter-spacing: var(--sx-type-eyebrow-track); text-transform: uppercase;
}

/* ---------- Progetti: indice e pagina ------------------------------------ */
.sx-projcard__media, .sx-projhead__media { position: relative; }
.sx-projcard__media .sx-story-icon, .sx-projhead__media .sx-story-icon { position: relative; left: auto; top: auto; transform: none; width: min(30%, 128px); }
.sx-projhead { display: grid; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-projhead__text { display: grid; align-content: end; gap: var(--sx-space-4); padding: var(--sx-space-12) var(--g) var(--sx-space-10); }
.sx-projhead__text .sx-lead { max-width: 56ch; color: var(--sx-fg-2); }
.sx-projhead__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sx-space-3); color: var(--sx-fg-2);
  font-family: var(--font-mono); font-size: var(--sx-type-eyebrow-size); line-height: var(--sx-type-eyebrow-lh);
  letter-spacing: var(--sx-type-eyebrow-track); text-transform: uppercase;
}
.sx-projhead__icon { display: grid; place-items: center; width: 32px; height: 32px; background: var(--f); color: var(--k); }
.sx-projhead__icon .sx-px { width: 16px; height: 16px; }
.sx-projhead__media { min-height: 340px; overflow: hidden; border-top: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 1024px) {
  .sx-projhead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-projhead__text { min-height: 520px; padding: var(--sx-space-16) var(--sx-space-10) var(--sx-space-12) var(--g); }
  .sx-projhead__media { border-top: 0; border-left: var(--sx-border-hairline) solid var(--sx-line); }
}
.sx-projout {
  display: grid; justify-items: start; gap: var(--sx-space-4); max-width: 760px; margin: var(--sx-space-6) var(--g) 0;
  padding: var(--sx-space-8); border: var(--sx-border-hairline) solid var(--sx-line);
}
.sx-projout__list { display: grid; }
.sx-projout__item { display: grid; justify-items: start; gap: var(--sx-space-4); }
.sx-projout__item + .sx-projout__item { margin-top: var(--sx-space-6); padding-top: var(--sx-space-6); border-top: var(--sx-border-hairline) solid var(--sx-line); }
.sx-projout .sx-lead { color: var(--sx-fg-2); }

/* ---------- Pagine legali (testi del kit comune, markup di spun.ai) ------- */
.sx-legal__head { display: grid; gap: var(--sx-space-4); max-width: 1024px; padding: var(--sx-space-24) var(--g) var(--sx-space-10); }
.sx-legal__head .sx-lead { max-width: 720px; color: var(--sx-fg-2); }
.sx-legal__grid { display: grid; border-top: var(--sx-border-hairline) solid var(--sx-line); }
.sx-legal__nav { padding: var(--sx-space-4) var(--g); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-legal__nav ul { display: flex; flex-wrap: wrap; gap: var(--sx-space-2) var(--sx-space-6); }
.sx-legal__nav a { font-size: var(--sx-type-button-large-size); line-height: var(--sx-type-button-large-lh); font-weight: 500; color: var(--sx-fg-2); text-underline-offset: 3px; }
.sx-legal__nav a:hover, .sx-legal__nav a[aria-current="page"] { color: var(--sx-fg); text-decoration: underline; text-decoration-thickness: 1px; }
@media (min-width: 1024px) {
  .sx-legal__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .sx-legal__nav { padding: var(--sx-space-10) var(--sx-space-6) var(--sx-space-10) var(--g); border-bottom: 0; border-right: var(--sx-border-hairline) solid var(--sx-line); }
  .sx-legal__nav ul { position: sticky; top: calc(var(--sx-layout-nav-height) + var(--sx-space-10)); display: grid; gap: var(--sx-space-2); }
}
.sx-legal__sec { display: grid; gap: var(--sx-space-4); padding: var(--sx-space-8) var(--g); border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-legal__sec:last-child { border-bottom: 0; padding-bottom: var(--sx-space-16); }
.sx-legal__sec > * { max-width: 72ch; }
@media (min-width: 1024px) { .sx-legal__sec { padding: var(--sx-space-10) var(--g) var(--sx-space-10) var(--sx-space-10); } }
.sx-legal__list { display: grid; gap: var(--sx-space-3); padding-left: 1.2em; list-style: disc; }
.sx-legal__sec a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sx-legal__sec b { font-weight: 500; }
.sx-legal__sec code { padding: 0 var(--sx-space-1); border-radius: var(--sx-radius-chip); background: var(--sx-surface-2); font-family: var(--font-mono); font-size: .9em; }

/* ---------- 404 ----------------------------------------------------------- */
.sx-notfound { border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-notfound__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sx-space-10); padding: 0 var(--g) var(--sx-space-24); }
.sx-notfound__buttons { display: flex; flex-wrap: wrap; gap: var(--sx-space-2); }
/* Simbolo del logo con la scintilla (D-030), proporzione 325.8 x 348.54, nel colore del testo. */
.sx-notfound__symbol { display: block; width: 84px; height: 90px; color: var(--sx-fg); }
.sx-notfound__symbol .sx-symbol { width: 100%; height: 100%; }

@media (max-width: 767px) {
  .sx-headline--page, .sx-legal__head { padding-top: var(--sx-space-16); }
  .sx-phero__title { padding-top: var(--sx-space-16); }
  .sx-contact__card { padding: var(--sx-space-4); }
  .sx-projout { padding: var(--sx-space-6); }
  .sx-notfound__row { padding-bottom: var(--sx-space-16); }
  .sx-notfound__buttons { display: grid; width: 100%; }
}

/* ---------- Foto (D-044) ------------------------------------------------- */
/* Contenitore: l'immagine lo riempie, la sezione decide le misure. */
.sx-photo { position: relative; display: block; overflow: hidden; background: var(--sx-ink); }
.sx-photo--fill { position: absolute; inset: 0; }
.sx-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Storie dei progetti, come le storie dei clienti di Mistral: foto a tutta card, testo su una sfumatura. */
.sx-story--photo .sx-story__body {
  background: linear-gradient(to right, color-mix(in srgb, var(--sx-ink) 78%, transparent), color-mix(in srgb, var(--sx-ink) 46%, transparent) 62%, transparent);
}
@media (max-width: 767px) {
  .sx-story--photo .sx-story__body { background: linear-gradient(to top, color-mix(in srgb, var(--sx-ink) 86%, transparent) 40%, color-mix(in srgb, var(--sx-ink) 20%, transparent)); }
}
.sx-stories--projects { padding-top: var(--sx-space-16); background: var(--sx-surface); color: var(--sx-fg); }

/* Banda CTA: la foto sotto il cobalt, solo come luce. */
.sx-cta__photo { background: none; }
.sx-cta__photo .sx-photo__img { mix-blend-mode: luminosity; opacity: .55; }

/* Azienda come l'About di Mistral: foto nella testata e foto quadrate nelle sezioni a due colonne. */
.sx-phero__media--photo { min-height: 320px; }
@media (min-width: 1024px) { .sx-phero__media--photo { min-height: 560px; } }
.sx-row__art--photo { position: relative; aspect-ratio: 1; }
@media (min-width: 768px) { .sx-row__art--photo { aspect-ratio: auto; min-height: 560px; } }
@media (min-width: 1024px) { .sx-row__art--photo { min-height: 720px; } }
.sx-headline--latest { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sx-space-4); }

/* News come il blog di Mistral: filtri per categoria e news più recente in evidenza. */
.sx-filters { display: flex; flex-wrap: wrap; gap: var(--sx-space-2); margin-top: var(--sx-space-4); }
.sx-filter {
  padding: 6px 12px; border: var(--sx-border-hairline) solid var(--sx-line); border-radius: var(--sx-radius-button);
  background: none; color: var(--sx-fg-2); font-family: var(--font-mono); font-size: var(--sx-type-chip-size);
  line-height: var(--sx-type-chip-lh); letter-spacing: var(--sx-type-chip-track); text-transform: uppercase; cursor: pointer;
}
.sx-filter:hover { color: var(--sx-fg); }
.sx-filter[aria-pressed="true"] { background: var(--sx-fg); border-color: var(--sx-fg); color: var(--sx-bg); }
.sx-newsfeat { border-top: var(--sx-border-hairline) solid var(--sx-line); }
@media (min-width: 1024px) { .sx-newsfeat { margin-inline: var(--g); border-inline: var(--sx-border-hairline) solid var(--sx-line); } }
.sx-newsfeat__link { display: grid; }
@media (min-width: 1024px) { .sx-newsfeat__link { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.sx-newsfeat__body { display: flex; flex-direction: column; gap: var(--sx-space-4); padding: var(--sx-space-8) var(--g); }
@media (min-width: 1024px) { .sx-newsfeat__body { padding: var(--sx-space-10); } }
.sx-newsfeat__title { font-size: var(--sx-type-h3-size); line-height: var(--sx-type-h3-lh); letter-spacing: var(--sx-type-h3-track); font-weight: 500; }
.sx-newsfeat__more { display: inline-flex; align-items: center; gap: var(--sx-space-2); margin-top: auto; font-weight: 500; }
.sx-newsfeat__more .sx-arrow { width: 16px; height: 16px; transition: translate .2s steps(2, jump-none); }
.sx-newsfeat__link:hover .sx-newsfeat__more .sx-arrow { translate: 2px -2px; }
.sx-newsfeat__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--sx-surface); }
@media (min-width: 1024px) {
  /* La foto non detta l'altezza: la riga segue il testo, con un minimo. */
  .sx-newsfeat__media { position: relative; aspect-ratio: auto; min-height: 460px; border-left: var(--sx-border-hairline) solid var(--sx-line); }
  .sx-newsfeat__media img { position: absolute; inset: 0; }
}
.sx-newsfeat__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.4, 0, .2, 1); }
.sx-newsfeat__link:hover .sx-newsfeat__media img { scale: 1.03; }
.sx-newsfeat[hidden], .sx-newscard[hidden] { display: none; }

/* Progetti: foto nelle card e nella testata; la scena animata del progetto galleggia sopra la foto. */
.sx-projcard__media .sx-photo__img { transition: scale .5s cubic-bezier(.4, 0, .2, 1); }
.sx-newscard__link:hover .sx-projcard__media .sx-photo__img { scale: 1.04; }
.sx-projhead__stage { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 6%, 56px); }
.sx-projhead__stage > * { width: min(100%, 440px); }

/* Schede prodotto con la schermata del loro sito in testa, a filo della scheda: poi icona, nome, frase e link (D-044). */

/* Progetti finanziati: CUP in evidenza, testo ufficiale e loghi dei finanziatori su una lastra bianca. */
.sx-funding { display: grid; gap: var(--sx-space-6); max-width: 760px; margin: 0 var(--g) var(--sx-space-10); padding: var(--sx-space-8); border: var(--sx-border-hairline) solid var(--sx-line); }
.sx-funding__codes { display: flex; flex-wrap: wrap; gap: var(--sx-space-4) var(--sx-space-10); margin: 0; }
.sx-funding__code { display: grid; gap: var(--sx-space-1); }
.sx-funding__code dt { font-family: var(--font-mono); font-size: var(--sx-type-eyebrow-size); line-height: var(--sx-type-eyebrow-lh); letter-spacing: var(--sx-type-eyebrow-track); text-transform: uppercase; color: var(--sx-fg-2); }
.sx-funding__code dd { margin: 0; font-family: var(--font-mono); font-size: var(--sx-type-h5-size); line-height: var(--sx-type-h5-lh); }
.sx-funding__text { color: var(--sx-fg-2); }
.sx-funding__plate { padding: var(--sx-space-4); background: #FFFFFF; border-radius: var(--sx-radius-chip); }
.sx-funding__logos { background: none; }
.sx-funding__logos .sx-photo__img { height: auto; object-fit: contain; }
@media (max-width: 767px) { .sx-funding { padding: var(--sx-space-6); } }

/* ---------- Pagine famiglia (D-046, come le pagine prodotto di Mistral) ---------- */
.sx-famhead { display: grid; border-bottom: var(--sx-border-hairline) solid var(--sx-line); }
.sx-famhead > .sx-crumbs { grid-column: 1 / -1; }
.sx-famhead__text { display: grid; align-content: start; justify-items: start; gap: var(--sx-space-5); padding: var(--sx-space-12) var(--g) var(--sx-space-8); }
.sx-famhead__text .sx-lead { max-width: 56ch; color: var(--sx-fg-2); }
.sx-famhead__text .sx-chip a { color: inherit; text-decoration: none; }
.sx-famhead__text .sx-chip a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx-famhead__media { padding: 0 var(--g) var(--sx-space-10); }
@media (min-width: 1024px) {
  .sx-famhead { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: center; }
  .sx-famhead__text { padding: var(--sx-space-16) var(--sx-space-10) var(--sx-space-16) var(--g); }
  .sx-famhead__media { padding: var(--sx-space-10) var(--g) var(--sx-space-10) 0; }
}

.sx-famchap__meta { display: flex; align-items: center; gap: var(--sx-space-3); margin-bottom: var(--sx-space-3); }
.sx-famchap__icon { display: grid; place-items: center; width: 32px; height: 32px; background: var(--f); color: var(--k); }
.sx-famchap__icon .sx-px { width: 16px; height: 16px; }
.sx-famchap .sx-pcard__text { max-width: 60ch; }
/* Sul telefono il capitolo resta nell'ordine del sorgente (le card della home invece si ricompongono) */
@media (max-width: 767px) {
  .sx-famchap .sx-pcard__head { display: flex; }
  .sx-famchap .sx-pcard__body { display: flex; }
  .sx-famchap .sx-pcard__heading, .sx-famchap .sx-pcard__text { order: 0; padding: 0; border-top: 0; }
  .sx-famchap .sx-pcard__head > .sx-btn { order: 0; margin: 0; }
}

/* Fila media: la cella grande (video, foto o scena) a sinistra; a destra, una sopra l'altra, scena e schermata */
.sx-mediarow { display: grid; gap: var(--sx-space-2); }
.sx-mediarow__cell { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sx-surface); box-shadow: 0 0 0 var(--sx-border-hairline) var(--sx-line); }
.sx-mediarow__cell > .sx-photo, .sx-mediarow__cell > .sx-feat { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; }
.sx-photo__img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .sx-mediarow--n2, .sx-mediarow--n3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .sx-mediarow--n3 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .sx-mediarow--n3 .sx-mediarow__cell--big { grid-row: 1 / span 2; }
  .sx-mediarow--n2 .sx-mediarow__cell:not(.sx-mediarow__cell--big),
  .sx-mediarow--n3 .sx-mediarow__cell:not(.sx-mediarow__cell--big) { aspect-ratio: auto; }
}

/* Funzioni: titolo e una riga, in celle come le card di Mistral */
.sx-famchap__funcs { display: grid; gap: var(--sx-space-3); }
.sx-funcs { display: grid; gap: var(--sx-space-2); }
@media (min-width: 768px) { .sx-funcs--n2, .sx-funcs--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sx-funcs--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sx-funcs__item { display: grid; align-content: start; gap: var(--sx-space-2); padding: var(--sx-space-5); background: var(--sx-surface); }
.sx-funcs__title { font-size: var(--sx-type-h5-size); line-height: var(--sx-type-h5-lh); font-weight: 500; }
.sx-funcs__text { font-size: var(--sx-type-small-size); line-height: var(--sx-type-small-lh); color: var(--sx-fg-2); }
.sx-famchap__casebox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sx-space-3); }
.sx-famchap__case { display: inline-flex; align-items: center; gap: var(--sx-space-1); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sx-famchap__case .sx-arrow { width: 16px; height: 16px; }

/* Altre famiglie: le icone dei prodotti sul colore della famiglia */
.sx-famcard__media { display: grid; place-items: center; background: var(--f); color: var(--k); }
.sx-famcard__media .sx-tile__icons { justify-content: center; gap: var(--sx-space-2); }
.sx-famcard__media .sx-tile__icon { width: 48px; height: 48px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sx-ink) 18%, transparent); }
.sx-famcard__media .sx-tile__icon .sx-px { width: 24px; height: 24px; }

/* Simbolo animato: packages/design-tokens/spun_symbol.py (D-030, DESIGN_SYSTEM §3) */
.sx-symbol { display:block; overflow:visible }
.sx-symbol__spark { opacity:0 }
@media (prefers-reduced-motion: no-preference) {
  .sx-symbol__spark { opacity:1; animation:sx-symbol-spark 3.2s linear infinite }
}
@keyframes sx-symbol-spark { from { stroke-dashoffset:1 } to { stroke-dashoffset:0 } }

}
@layer utilities {
/* Utilità, accessibilità, movimento ridotto. */
.sx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sx-skip {
  position: fixed; left: var(--sx-space-2); top: var(--sx-space-2); z-index: 100; transform: translateY(-200%);
  padding: var(--sx-space-2) var(--sx-space-4); border-radius: var(--sx-radius-button);
  background: var(--sx-btn-bg); color: var(--sx-btn-fg); font-weight: 500;
}
.sx-skip:focus { transform: none; }
html:not(.sx-js) .sx-js-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sx-eco__viewport { width: auto; animation: none; }
  .sx-eco__track { flex-wrap: wrap; }
  .sx-eco__track[aria-hidden="true"] { display: none; }
  .sx-js [data-reveal] > li { opacity: 1; transform: none; transition: none; }
  .sx-nav__panel, .sx-nav__chev, .sx-mobile__root, .sx-mobile__sub, .sx-tile__panel, .sx-btn .sx-arrow, .sx-nav__cta .sx-arrow { transition: none; }
  .sx-btn:hover .sx-arrow, .sx-nav__cta:hover .sx-arrow { transform: none; }
  .sx-hero__scroll .sx-arrow { animation: none; }
  .sx-ptile__link .sx-arrow, .sx-stories__all .sx-arrow { transition: none; }
  /* Servizi: niente barra che avanza, tutti i testi visibili. */
  .sx-slide__bar { display: none; }
  .sx-js .sx-slide__text { display: block; }
}

}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}