/* ═══ Font self-hosted ═══
   Geist (testo) e Nunito (display): stessi tagli che il sito caricava da
   Google Fonts, ora serviti dal dominio. Nessuna terza parte nel percorso
   critico e nessun IP dell'utente verso host esterni. font-display:swap,
   così il testo è leggibile anche prima che il font arrivi. ═══ */
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/geist-sans-latin-300-normal.woff2') format('woff2');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:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-sans-latin-400-normal.woff2') format('woff2');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:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-sans-latin-500-normal.woff2') format('woff2');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:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/geist-sans-latin-600-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/nunito-latin-ext-300-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/nunito-latin-300-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-ext-400-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-400-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/nunito-latin-ext-500-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/nunito-latin-500-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-latin-ext-600-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-latin-600-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-latin-ext-700-normal.woff2') format('woff2');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:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-latin-700-normal.woff2') format('woff2');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:'Nunito';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-ext-400-italic.woff2') format('woff2');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:'Nunito';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-400-italic.woff2') format('woff2');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}


/* ═══ Token — vedi brand-spec.md. Il verde è campionato dal logo. ═══ */
:root {
  --accent:      oklch(0.654 0.127 162.5);
  --accent-ink:  oklch(0.525 0.112 163);
  --bg:          oklch(0.976 0.006 162);
  --surface:     oklch(1 0 162);
  --surface-2:   oklch(0.955 0.007 162);
  --fg:          oklch(0.205 0.014 165);
  --muted:       oklch(0.515 0.014 165);
  --faint:       oklch(0.635 0.012 165);
  --border:      oklch(0.905 0.009 162);
  --border-soft: oklch(0.875 0.010 163);

  --glass:       oklch(1 0 162 / 0.62);
  --glass-strong:oklch(1 0 162 / 0.84);
  --panel-bg:    oklch(0.190 0.014 166);
  --panel-fg:    oklch(0.968 0.006 162);
  --panel-muted: oklch(0.968 0.006 162 / 0.64);
  --panel-row:   oklch(1 0 162 / 0.055);
  --panel-row-h: oklch(1 0 162 / 0.11);
  --panel-line:  oklch(1 0 162 / 0.12);
  --btn-fg:      oklch(0.976 0.006 162);
  --shadow-soft: 0 8px 20px oklch(0.205 0.014 165 / 0.10);
  --shadow-card: 4px 8px 18px oklch(0.205 0.014 165 / 0.12);
  --shadow-lift: 8px 14px 30px oklch(0.205 0.014 165 / 0.16);
  --stage-fade:  oklch(0.976 0.006 162 / 0);
  --stage-fade2: oklch(0.976 0.006 162);
  --plate:       oklch(0.985 0.003 162);
  color-scheme: light;
}
[data-theme="dark"] {
  --accent:      oklch(0.745 0.128 162.5);
  --accent-ink:  oklch(0.800 0.130 163);
  --bg:          oklch(0.178 0.014 166);
  --surface:     oklch(0.222 0.015 166);
  --surface-2:   oklch(0.252 0.015 166);
  --fg:          oklch(0.968 0.006 162);
  --muted:       oklch(0.735 0.016 165);
  --faint:       oklch(0.615 0.015 165);
  --border:      oklch(0.315 0.016 166);
  --border-soft: oklch(0.355 0.016 166);

  --glass:       oklch(0.222 0.015 166 / 0.62);
  --glass-strong:oklch(0.222 0.015 166 / 0.88);
  --panel-bg:    oklch(0.252 0.015 166);
  --panel-fg:    oklch(0.968 0.006 162);
  --panel-muted: oklch(0.735 0.016 165);
  --panel-row:   oklch(1 0 162 / 0.05);
  --panel-row-h: oklch(1 0 162 / 0.10);
  --panel-line:  oklch(0.400 0.016 166);
  --btn-fg:      oklch(0.178 0.014 166);
  --shadow-soft: 0 8px 20px oklch(0 0 0 / 0.42);
  --shadow-card: 4px 8px 18px oklch(0 0 0 / 0.45);
  --shadow-lift: 8px 14px 30px oklch(0 0 0 / 0.55);
  --stage-fade:  oklch(0.178 0.014 166 / 0);
  --stage-fade2: oklch(0.178 0.014 166);
  --plate:       oklch(0.930 0.004 162);
  color-scheme: dark;
}
:root {
  --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
  --accent-tint: color-mix(in oklch, var(--accent) 9%, transparent);
  --font-display: "Nunito", "Albert Sans", system-ui, sans-serif;
  --font-body: "Geist", "Albert Sans", Inter, -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-xs: 12px; --t-sm: 14px; --t-base: 16px; --t-md: 18px; --t-lg: 20px; --t-xl: 24px; --t-3xl: 36px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-28: 112px;
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 28px; --r-2xl: 44px; --r-pill: 50px; --r-circle: 999px;
  --ease: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1180px;
}

/* ═══ Base ═══ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--t-md); font-weight: 400;
  line-height: 1.55; letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }
section { padding: var(--s-28) 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-6); top: var(--s-4); z-index: 200; background: var(--surface); padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-card); }

.h1 { font-size: clamp(36px, 4.9vw, 62px); }
.h2 { font-size: clamp(30px, 3.4vw, 44px); }
.h3 { font-size: var(--t-xl); letter-spacing: -0.025em; }
.lead { font-size: var(--t-md); color: var(--muted); max-width: 58ch; }
.small { font-size: var(--t-sm); color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 500; color: var(--muted);
  letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: var(--s-5);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--accent); flex: none; }
.head { max-width: 660px; margin-bottom: var(--s-12); }
.head.mid { margin-left: auto; margin-right: auto; text-align: center; }
.head.mid .eyebrow { justify-content: center; }
.head p { margin-top: var(--s-4); color: var(--muted); font-size: var(--t-md); }

/* ═══ Bottoni ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px 24px; min-height: 46px; border-radius: var(--r-pill);
  font-size: var(--t-base); font-weight: 500; letter-spacing: -0.03em;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-ink { background: var(--fg); color: var(--btn-fg); box-shadow: var(--shadow-soft); }
.btn-ink:hover { background: color-mix(in oklch, var(--fg) 88%, var(--accent)); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-ink:active { transform: translateY(0) scale(0.98); }
.btn-ghost { background: var(--glass); border-color: var(--border); color: var(--fg); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: var(--surface); border-color: var(--fg); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-sm { padding: 9px 18px; min-height: 38px; font-size: var(--t-sm); }
.btn-block { width: 100%; }
.btn .arr { transition: transform 0.35s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--accent-ink); border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color 0.3s var(--ease); }
.link-arrow:hover { border-bottom-color: var(--accent-ink); }

/* ═══ Nav + mega menu ═══ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: var(--s-5) var(--s-6); }
.nav-inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 9px 9px 9px 18px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid transparent;
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.stuck .nav-inner { background: var(--glass-strong); border-color: var(--border); box-shadow: var(--shadow-soft); }
.nav.open .nav-inner { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-soft); }
.brand { display: block; flex: none; }
.brand img { width: 132px; height: auto; }
.nav-menu { display: flex; align-items: center; gap: 2px; }
.nav-link, .nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--r-pill);
  font-size: var(--t-sm); color: var(--muted); white-space: nowrap;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-link:hover, .nav-trigger:hover { color: var(--fg); background: var(--glass-strong); }
.nav-link.active, .nav-trigger.active {
  background: var(--accent-soft); color: var(--fg); font-weight: 500;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 34%, transparent);
}
.nav-trigger .caret { width: 12px; height: 12px; transition: transform 0.3s var(--ease); }
.nav-trigger[aria-expanded="true"] { color: var(--fg); background: var(--glass-strong); }
.nav-trigger.active[aria-expanded="true"] { background: var(--accent-soft); }
.nav-link.active:hover, .nav-trigger.active:hover {
  color: var(--fg); background: color-mix(in oklch, var(--accent) 26%, transparent);
}
.nav-right .btn[aria-current="page"] {
  background: var(--accent-soft); color: var(--fg);
  border-color: color-mix(in oklch, var(--accent) 46%, var(--border));
}
.nav-right .btn[aria-current="page"]:hover {
  background: color-mix(in oklch, var(--accent) 26%, transparent);
  border-color: color-mix(in oklch, var(--accent) 60%, var(--border)); color: var(--fg);
}
.nav-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-right { display: flex; align-items: center; gap: var(--s-2); }
.icon-btn {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-circle);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--glass); color: var(--fg);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.icon-btn:hover { background: var(--surface); border-color: var(--fg); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }
[data-theme="light"] .ico-sun { display: none; }
[data-theme="dark"] .ico-moon { display: none; }
.nav-partner {
  display: flex; align-items: center; gap: var(--s-4);
  margin-right: var(--s-2); opacity: 0.82;
  transition: opacity 0.3s var(--ease);
}
.nav-partner:hover { opacity: 1; }
.nav-partner::before { content: ""; display: block; width: 1px; height: 24px; background: var(--border); }
.nav-partner img { width: 94px; height: auto; }

/* ═══ Selettore lingua ═══ */
.lang {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 3px; border-radius: var(--r-circle);
  border: 1px solid var(--border); background: var(--glass);
}
.lang-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: var(--r-circle);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-opt:hover { background: var(--surface-2); color: var(--fg); }
.lang-opt[aria-current="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-soft); cursor: default; }
.lang-opt[aria-current="true"]:hover { background: var(--surface); color: var(--fg); }
.lang-opt[aria-disabled="true"] { color: var(--faint); cursor: not-allowed; }
.lang-opt[aria-disabled="true"]:hover { background: transparent; color: var(--faint); }
/* riga legale del footer: stessa grammatica, peso ridotto */
.foot-bot .lang { padding: 2px; background: transparent; border-color: var(--border-soft); }
.foot-bot .lang-opt { min-width: 30px; height: 26px; padding: 0 8px; font-size: 10px; }
/* menu mobile: due opzioni piene, target 44px */
.sh-lang { display: none; }
.nav-sheet .sh-group.sh-last { border-bottom: 0; }
.sh-lang .sh-lbl {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint);
  margin: var(--s-2) 0 var(--s-3) 8px;
}
.lang-block { display: flex; }
.lang-block .lang-opt { flex: 1; height: 44px; font-size: var(--t-sm); letter-spacing: 0.02em; text-transform: none; }

/* pannello */
.mega {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 5;
  padding: var(--s-6); border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease-out), visibility 0.28s;
}
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.mega-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.mega-head h3 { font-size: var(--t-lg); letter-spacing: -0.025em; }
.mega-head p { font-size: var(--t-sm); color: var(--muted); max-width: 46ch; margin-top: 4px; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mega-item {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease-out);
}
.mega-item:hover { background: var(--surface-2); border-color: var(--border); transform: translateY(-2px); }
.mega-item .mi {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center;
}
.mega-item .mi svg { width: 15px; height: 15px; }
.mega-item b { display: block; font-weight: 500; font-size: var(--t-sm); letter-spacing: -0.03em; line-height: 1.3; }
.mega-item span { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.45; margin-top: 3px; }
.mega-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.mega-foot .small { max-width: 52ch; }

/* menu mobile */
.burger { display: none; }
.nav-sheet {
  display: none; max-width: var(--container); margin: var(--s-2) auto 0;
  max-height: calc(100vh - 120px); overflow-y: auto;
  background: var(--glass-strong); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4); box-shadow: var(--shadow-card);
}
.nav-sheet.open { display: block; }
.nav-sheet .sh-group { border-bottom: 1px solid var(--border); padding-bottom: var(--s-3); margin-bottom: var(--s-3); }
.nav-sheet .sh-group:last-of-type { border-bottom: 0; }
.nav-sheet .sh-top { display: block; padding: 10px 8px; font-family: var(--font-display); font-size: var(--t-md); letter-spacing: -0.025em; }
.nav-sheet .sh-sub { display: block; padding: 8px 8px 8px 20px; font-size: var(--t-sm); color: var(--muted); border-left: 2px solid var(--border); margin-left: 8px; }
.nav-sheet .sh-sub:hover { color: var(--fg); border-left-color: var(--accent); }
.nav-sheet .sh-top.active {
  color: var(--fg); background: var(--accent-soft); border-radius: 10px;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 34%, transparent);
}
.nav-sheet .btn { margin-top: var(--s-3); }

/* ═══ Hero ═══ */
.hero { padding: 172px 0 0; text-align: center; position: relative; overflow-x: clip; }
/* overflow-x: clip sulle due sezioni qui sopra e qui sotto — non è cosmetico.
   Il bagliore decorativo è largo 940-980 px e centrato: sotto i ~980 px di
   finestra sporge a destra e crea scroll orizzontale. Su desktop non si vede,
   ma Chrome su mobile allarga la viewport di layout fino alla larghezza del
   contenuto, e l'header (position: fixed; inset: 0 0 auto 0) si allarga con
   lei: sbordava fuori dallo schermo.
   Serve «clip» e non «hidden»: hidden su un asse forza l'altro ad auto, e la
   sezione si porterebbe dietro uno scroll verticale suo. */
.hero::before {
  content: ""; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 940px; height: 640px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-tint) 0%, transparent 66%);
}
.hero > * { position: relative; }

.hero-rot .h1 {
  font-family: var(--font-display); font-weight: 400;
  line-height: 1.08; letter-spacing: -0.03em;
  margin: var(--s-6) auto var(--s-5); max-width: 16ch; text-wrap: balance;
}
.hero-rot .h1 em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 58%, var(--accent-soft) 58%);
  padding: 0 0.08em;
}
.hero-sub { font-size: var(--t-md); color: var(--muted); max-width: 54ch; margin: 0 auto; }
.hero-rot { display: grid; }
.hero-slide {
  grid-area: 1 / 1; align-self: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out), visibility 0.55s;
}
.hero-slide[data-on="true"] { opacity: 1; visibility: visible; transform: none; }
a.eyebrow { transition: color 0.3s var(--ease); }
a.eyebrow:hover { color: var(--fg); }
.hero-ctl { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-10); }
.hero-ctl .hs-bar { flex: none; width: 132px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-8); }
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-8); }
.hc {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--border);
  font-size: var(--t-sm); color: var(--muted);
}
.hc::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--border-soft); flex: none; }
.hero-meta { margin-top: var(--s-5); font-size: var(--t-xs); color: var(--faint); }

/* prima slide della hero: testo a sinistra, schermata gestione realtime a destra */
.hero-slide.hs-split {
  display: grid; grid-template-columns: minmax(0, auto) 340px;
  gap: var(--s-12); align-items: center; justify-content: center; text-align: left;
}
.hero-slide.hs-split .h1 { margin-left: 0; margin-right: 0; max-width: 16ch; }
.hero-slide.hs-split .hero-sub { margin: 0; max-width: 48ch; }
.hs-shot { margin: 0; justify-self: start; width: 100%; max-width: 340px; }
.hs-shot .app { max-width: none; border-radius: var(--r-lg); }
.hs-shot .app-top { padding: 9px var(--s-4); gap: var(--s-3); }
.hs-shot .app-dots i { width: 7px; height: 7px; }
.hs-shot .app-url { font-size: 10px; padding: 4px 10px; max-width: 190px; }
.hs-shot .mon { width: 100%; }
.hs-shot .mon-frame { padding: 8px 8px 18px; border-radius: 12px; }
.hs-shot .mon-frame::after { bottom: 7px; width: 5px; height: 5px; }
.hs-shot .mon-stand .neck { width: 62px; height: 13px; }
.hs-shot .mon-stand .base { width: 150px; height: 6px; }
.hs-shot video.mon-shot { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 1040px) {
  .hero-slide.hs-split { grid-template-columns: 1fr; gap: var(--s-10); justify-content: stretch; text-align: center; }
  .hero-slide.hs-split .h1 { margin-left: auto; margin-right: auto; }
  .hero-slide.hs-split .hero-sub { margin: 0 auto; }
  .hs-shot { max-width: 340px; margin: 0 auto; justify-self: center; }
}

/* ═══ Palco: mock del gestore contenuti ═══ */
.stage { position: relative; margin-top: var(--s-16); padding-bottom: var(--s-20); }
.stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(var(--stage-fade) 0%, var(--stage-fade2) 82%);
  pointer-events: none;
}
.app {
  max-width: 1040px; margin: 0 auto; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden;
}
.app-top {
  display: flex; align-items: center; gap: var(--s-4); padding: 12px var(--s-5);
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.app-dots { display: flex; gap: 6px; }
.app-dots i { width: 9px; height: 9px; border-radius: var(--r-circle); display: block; background: var(--border-soft); }
.app-dots i:nth-child(3) { background: var(--accent); }
.app-url {
  flex: 1; max-width: 300px; margin: 0 auto; text-align: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px 12px;
}
.app-shot { width: 100%; height: auto; background: var(--surface-2); }

/* cornice monitor (schermo in onda) */
.mon { margin: 0; }
.mon-frame {
  position: relative; background: var(--panel-bg); border: 1px solid var(--panel-line);
  border-radius: 14px; padding: 12px 12px 24px; box-shadow: var(--shadow-card);
}
.mon-frame::after {
  content: ""; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--accent); opacity: 0.7;
}
.mon-shot { width: 100%; height: auto; border-radius: 4px; background: var(--surface-2); }
.mon-stand { display: flex; flex-direction: column; align-items: center; }
.mon-stand i { display: block; background: var(--panel-bg); }
.mon-stand .neck { width: 90px; height: 18px; border-radius: 0 0 5px 5px; opacity: 0.9; }
.mon-stand .base { width: 220px; max-width: 60%; height: 8px; border-radius: var(--r-pill); opacity: 0.78; }
.mon-cap { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--faint); text-align: center; }
.stage-inner { position: relative; max-width: 1040px; margin: 0 auto; }
.stage-inner > .app { rotate: -2.2deg; }
.app-alt {
  position: absolute; z-index: 3; right: -24px; bottom: -20px; width: 46%; margin: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lift); overflow: hidden;
  rotate: 3.4deg;
}
.app-alt .app-top { padding: 9px var(--s-4); gap: var(--s-3); }
.app-alt .app-dots i { width: 7px; height: 7px; }
.app-alt .app-url { font-size: 10px; padding: 4px 10px; max-width: 210px; }
.app-cap {
  position: relative; z-index: 2;
  margin: var(--s-6) auto 0; max-width: 62ch; text-align: center;
  font-size: var(--t-sm); color: var(--muted);
}
.app-cap b { font-weight: 500; color: var(--fg); }
/* variante hero a due colonne (chiedi-a-me) */
.hero-split { padding-bottom: var(--s-12); }
.hero-split .hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: var(--s-12); align-items: center; }
.hero-split h1 { max-width: 15ch; }
.hero-split .lead { font-size: var(--t-md); max-width: 46ch; }
.hero-split .stage { margin-top: 0; padding-bottom: var(--s-6); }
.hero-split .stage::after { display: none; }
.hero-split .stage-inner { max-width: none; }
.hero-split .app-alt { width: 64%; right: -26px; bottom: -24px; }
.hero-split .app-cap { text-align: left; margin: var(--s-6) 0 0; max-width: 48ch; }
.hero-split .toc { margin-top: var(--s-12); }
@media (max-width: 1040px) {
  .hero-split .hero-grid { grid-template-columns: 1fr; gap: var(--s-10); }
  .hero-split h1, .hero-split .lead { max-width: 22ch; }
  .hero-split .lead { max-width: 56ch; }
  .hero-split .app-cap { text-align: center; margin-left: auto; margin-right: auto; }
}

.chip-mini { font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }

/* schede prodotto (index) */
.showcase .wrap { display: grid; gap: var(--s-5); }
.sc-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  padding: 6px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
}
.sc-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 20px; border-radius: var(--r-pill); min-height: 52px;
  font-size: var(--t-md); letter-spacing: -0.03em; color: var(--muted);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sc-tab svg { width: 19px; height: 19px; flex: none; }
.sc-tab:hover { color: var(--fg); background: var(--panel-row); }
.sc-tab[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-soft); }
.sc-panel {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--s-10);
  padding: var(--s-8); border-radius: var(--r-2xl);
  background: var(--surface-2); border: 1px solid var(--border);
}
.sc-panel[hidden] { display: none; }
.sc-shot {
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.sc-shot img { display: block; width: 100%; height: auto; }
.sc-txt { padding-right: var(--s-4); }
.sc-badge {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.sc-txt .h2 { margin: var(--s-5) 0 var(--s-4); }
.sc-txt p:not(.sc-badge) { color: var(--muted); max-width: 42ch; }
.sc-txt .link-arrow { margin-top: var(--s-6); }
@media (max-width: 1040px) {
  .sc-panel { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-6); }
  .sc-txt { padding-right: 0; }
}
@media (max-width: 560px) {
  .sc-tabs { grid-template-columns: 1fr; border-radius: var(--r-lg); }
  .sc-tab { border-radius: var(--r-lg); }
}

/* ═══ Ticker settori ═══ */
.ticker-sec { padding: var(--s-12) 0 var(--s-16); }
.ticker-lead { text-align: center; font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-8); }
.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(270deg, transparent 0%, black 10% 90%, transparent 100%); mask-image: linear-gradient(270deg, transparent 0%, black 10% 90%, transparent 100%); }
.ticker-track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 var(--s-8);
  font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: -0.025em;
  color: var(--muted); white-space: nowrap;
}
.ticker-item i { width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--border-soft); display: block; }

/* ═══ Card e griglie ═══ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-8); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.card h3, .card .h3 { margin: 0 0 10px; }   /* .card-link ridefinisce i suoi, più sotto */

/* Fotografia in un riquadro: per le pagine di settore, dove l'immagine è una
   foto d'ambiente e non uno screenshot dell'app (che ha la sua cornice .app). */
.foto { margin: 0; }
.foto img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); border: 1px solid var(--panel-line);
  background: var(--surface-2);
}
.foto figcaption {
  margin-top: var(--s-4); font-size: var(--t-xs); color: var(--faint); text-align: center;
}
/* Foto verticale: senza un tetto all'altezza una foto in piedi allungherebbe
   la hero al punto da spingere fuori schermo i bottoni. */
.foto-alta img { max-height: 560px; width: auto; margin: 0 auto; }

/* ═══ Conferma invio ═══ */
.ok-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-circle);
  background: var(--accent-soft); color: var(--accent-ink);
}
.ok-mark svg { width: 26px; height: 26px; }
.recap {
  margin-top: var(--s-8); max-width: 760px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-6);
  padding: var(--s-6); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
}
.recap dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
}
.recap dd { margin: 6px 0 0; font-size: var(--t-base); color: var(--fg); overflow-wrap: anywhere; }
.recap[hidden] { display: none; }
.step-n { display: block; color: var(--faint); margin-bottom: var(--s-4); }
.card-link { display: flex; flex-direction: column; }
.card-link:hover { border-color: var(--fg); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card-link .ft {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
}
.card-link h3 { margin: 12px 0 10px; }
.card-link p { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-6); }
.card-link .link-arrow { margin-top: auto; align-self: start; }
.card.hoverable { transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.card.hoverable:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-12); align-items: center; }

/* ═══ Progetto: statistiche ═══ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-12); }
.stat { padding: var(--s-6) 0; border-top: 1px solid var(--border-soft); }
.stat .n { font-family: var(--font-display); font-size: var(--t-3xl); letter-spacing: -0.03em; line-height: 1; }
.stat .n small { font-size: 0.5em; color: var(--muted); letter-spacing: -0.03em; }
.stat .k { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-3); max-width: 26ch; }
.source { margin-top: var(--s-8); font-size: var(--t-xs); color: var(--faint); }

/* ═══ Testi legali ═══ */
.legal { max-width: 70ch; }
.legal > * + * { margin-top: var(--s-5); }
.legal h2 {
  font-size: var(--t-xl); letter-spacing: -0.04em; color: var(--fg);
  margin-top: var(--s-16); padding-top: var(--s-6);
  border-top: 1px solid var(--border-soft); scroll-margin-top: 120px;
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: var(--t-md); letter-spacing: -0.02em; margin-top: var(--s-8); }
.legal p, .legal li { font-size: var(--t-base); line-height: 1.7; color: var(--muted); }
.legal ul { padding-left: 20px; display: grid; gap: 10px; }
.legal li::marker { color: var(--faint); }
.legal strong { color: var(--fg); font-weight: 500; }

/* ═══ Documento con indice a lato ═══ */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-20); align-items: start; }
.doc .legal { max-width: 74ch; }
.doc-nav {
  position: sticky; top: 116px; display: grid; gap: 2px;
  padding: var(--s-5) var(--s-4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.doc-nav-lbl {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint);
  margin-bottom: var(--s-3); padding-left: 12px;
}
.doc-nav a {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: baseline;
  padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--t-sm); line-height: 1.4;
  color: var(--muted); border: 1px solid transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.doc-nav a:hover { background: var(--surface-2); color: var(--fg); }
.doc-nav a .n { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
.doc-nav a.active { background: var(--surface-2); color: var(--fg); border-color: var(--fg); }
.doc-nav a.active .n { color: var(--muted); }
@media (max-width: 1040px) {
  .doc { grid-template-columns: 1fr; gap: var(--s-8); }
  .doc .legal { max-width: 70ch; }
  .doc-nav { position: static; grid-template-columns: repeat(2, 1fr); }
  .doc-nav-lbl { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .doc-nav { grid-template-columns: 1fr; } }
.legal a { color: var(--accent-ink); border-bottom: 1px solid transparent; }
.legal a:hover { border-bottom-color: var(--accent-ink); }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.legal th {
  text-align: left; font-weight: 500; color: var(--fg);
  padding: 10px 16px 10px 0; border-bottom: 1px solid var(--border);
}
.legal td {
  color: var(--muted); padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--border-soft); vertical-align: top;
}
.legal tr > *:last-child { padding-right: 0; }

/* ═══ Pannello a inchiostro: i vantaggi ═══ */
.panel {
  background: var(--panel-bg); color: var(--panel-fg);
  border: 1px solid var(--panel-line); border-radius: var(--r-2xl);
  padding: var(--s-20) var(--s-12); position: relative; overflow: hidden;
}
.panel h2, .panel h3 { color: var(--panel-fg); }
.panel .head p, .panel p { color: var(--panel-muted); }
.panel .eyebrow { color: var(--panel-muted); }
.adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-10); }
.adv {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: 18px 22px; border-radius: var(--r-md);
  background: var(--panel-row); border: 1px solid var(--panel-line);
  transition: background 0.35s var(--ease), transform 0.45s var(--ease-out);
}
.adv:hover { background: var(--panel-row-h); transform: translateY(-3px); }
.adv:last-child:nth-child(odd) { grid-column: 1 / -1; }
.adv .an { font-family: var(--font-mono); font-size: 11px; color: var(--panel-muted); flex: none; padding-top: 4px; }
.adv b { display: block; font-family: var(--font-display); font-size: var(--t-md); font-weight: 400; letter-spacing: -0.025em; line-height: 1.25; }

/* ═══ Formula tutto incluso ═══ */
.incl { display: grid; gap: 0; margin-top: var(--s-6); }
.incl-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center;
  padding: 15px 4px; border-top: 1px solid var(--border-soft); font-size: var(--t-sm);
}
.incl-row:last-child { border-bottom: 1px solid var(--border-soft); }
.incl-row b { font-weight: 500; font-size: var(--t-base); letter-spacing: -0.03em; }
.incl-row .yes { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--t-sm); }
.incl-row .yes svg { width: 15px; height: 15px; color: var(--accent-ink); }
.incl-row .ask { color: var(--muted); font-size: var(--t-sm); }
.formula-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-8); }
.fc { padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.fc .ft { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.fc h4 { font-size: var(--t-lg); letter-spacing: -0.04em; margin: 10px 0 8px; }
.fc p { font-size: var(--t-sm); color: var(--muted); }

/* ═══ Catalogo display ═══ */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); }
.filt {
  padding: 11px 18px; min-height: 44px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--glass); color: var(--muted); font-size: var(--t-sm);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.filt:hover { color: var(--fg); border-color: var(--fg); transform: translateY(-1px); }
.filt[aria-pressed="true"] { background: var(--fg); color: var(--btn-fg); border-color: var(--fg); }
.filt[aria-pressed="true"]:hover { background: color-mix(in oklch, var(--fg) 88%, var(--accent)); color: var(--btn-fg); }
.filt .c { font-family: var(--font-mono); font-size: 11px; opacity: 0.7; margin-left: 6px; }
.cat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.dcard {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-5); overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.35s var(--ease);
}
/* Il filtro nasconde con l'attributo hidden, e serve dirlo qui: la regola del
   browser per [hidden] e' display:none, ma vale meno di un selettore di classe
   — quindi il display:flex qui sopra la batte, l'attributo viene messo e la
   card resta visibile lo stesso. */
.dcard[hidden] { display: none; }
.dcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--border-soft); }
.dcard .shot {
  background: var(--plate); border-radius: var(--r-sm); aspect-ratio: 4/3;
  display: grid; place-items: center; padding: var(--s-4); overflow: hidden;
}
.dcard .shot img { max-height: 100%; width: auto; object-fit: contain; }
.dcard .brandline { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); }
.dcard .bd { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.dcard .dname { display: block; font-family: var(--font-display); font-size: var(--t-md); line-height: 1.15; letter-spacing: -0.025em; margin-top: 6px; }
.dcard .role { font-size: var(--t-sm); color: var(--muted); margin-top: 6px; }
.specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-4); }
.spec { font-family: var(--font-mono); font-size: 11px; padding: 4px 9px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.dcard .more { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: var(--t-sm); color: var(--muted); transition: color 0.3s var(--ease); }
.dcard .more svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.dcard:hover .more { color: var(--fg); }
.dcard:hover .more svg { transform: translateX(3px); }
.cat-empty { padding: var(--s-12) 0; text-align: center; color: var(--muted); font-size: var(--t-sm); }
/* Le schede tecniche generate dalla build: stanno nel sorgente della pagina
   ma si vedono solo dentro il dialogo, che ne copia il contenuto. */
.cat-schede { display: none; }
.sheet-table .senza-ingombri { font-family: var(--font-body); color: var(--muted); }

/* ═══ Dialog scheda prodotto ═══ */
dialog.sheet {
  width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 780px); padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lift); overflow: hidden;
}
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet::backdrop { background: oklch(0.15 0.01 165 / 0.55); backdrop-filter: blur(3px); }
.sheet-top { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-6) var(--s-6) var(--s-4); border-bottom: 1px solid var(--border); }
.sheet-top .bd { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.sheet-top h3 { font-size: var(--t-xl); letter-spacing: -0.04em; margin-top: 6px; max-width: 34ch; }
.sheet-body { flex: 1 1 auto; min-height: 0; padding: var(--s-6); overflow-y: auto; display: grid; grid-template-columns: 280px 1fr; gap: var(--s-6); align-items: start; }
.sheet-shot { background: var(--plate); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); display: grid; place-items: center; aspect-ratio: 4/3; }
.sheet-shot img { max-height: 100%; width: auto; object-fit: contain; }
.sheet-body h4 { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s-3); }
.sheet-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.sheet-table th, .sheet-table td { padding: 9px 0; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.sheet-table th { font-weight: 400; color: var(--muted); width: 44%; }
.sheet-table td { font-family: var(--font-mono); font-size: var(--t-xs); }
.sheet-foot { flex: none; padding: var(--s-4) var(--s-6) var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; border-top: 1px solid var(--border); }
.sheet-foot .small { max-width: 40ch; }

/* ═══ Template ═══ */
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.tpl { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.tpl:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
/* --- Video di presentazione (home) ---
   Lo sfondo violaceo e' quello del video stesso: sta sotto al player per
   evitare il lampo bianco fra il momento in cui la cornice viene disegnata e
   quello in cui il poster e' decodificato. Non entra nella palette perche'
   resta confinato dentro la card, separato dal verde da un margine di neutro. */
.vid { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: #281030; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.vid video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vid-play {
  position: absolute; right: var(--s-5); bottom: var(--s-5);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-circle); cursor: pointer;
  background: var(--glass-strong); color: var(--fg);
  backdrop-filter: blur(8px); box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--ease);
}
.vid-play:hover { transform: scale(1.06); }
.vid-play svg { width: 17px; height: 17px; }
.vid-play .ic-pause { display: none; }
.vid-play[aria-pressed="true"] .ic-play { display: none; }
.vid-play[aria-pressed="true"] .ic-pause { display: block; }

.tpl-vid { position: relative; background: var(--fg); }
.tpl-vid video { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tpl-play {
  position: absolute; inset: auto var(--s-4) var(--s-4) auto;
  width: 46px; height: 46px; border-radius: var(--r-circle);
  background: var(--glass-strong); backdrop-filter: blur(10px);
  border: 1px solid var(--border); color: var(--fg);
  display: grid; place-items: center; box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.tpl-play:hover { transform: scale(1.06); background: var(--surface); }
.tpl-play svg { width: 17px; height: 17px; }
.tpl-play .ic-pause { display: none; }
.tpl-play[aria-pressed="true"] .ic-play { display: none; }
.tpl-play[aria-pressed="true"] .ic-pause { display: block; }
.tpl-txt { padding: var(--s-6); }
.tpl-txt .ft { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.tpl-txt h3 { font-size: var(--t-lg); letter-spacing: -0.04em; margin: 10px 0 8px; }
.tpl-txt p { font-size: var(--t-sm); color: var(--muted); }

/* ═══ FAQ ═══ */
.faq { max-width: 780px; margin: 0 auto; }
.acc { border-bottom: 1px solid var(--border-soft); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-6) var(--s-2); text-align: left;
  font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: -0.025em;
  transition: color 0.3s var(--ease);
}
.acc-btn:hover { color: var(--accent-ink); }
.acc-ico {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-circle);
  border: 1px solid var(--border-soft); display: grid; place-items: center;
  transition: transform 0.4s var(--ease-out), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.acc-btn:hover .acc-ico { border-color: var(--accent-ink); }
.acc.open .acc-ico { transform: rotate(45deg); background: var(--fg); color: var(--btn-fg); border-color: var(--fg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); }
.acc.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p { padding: 0 var(--s-2) var(--s-6); color: var(--muted); font-size: var(--t-base); max-width: 64ch; }

/* ═══ Contatti ═══ */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: start; }
.contact-list { margin-top: var(--s-10); display: grid; gap: var(--s-2); }
.cl {
  display: flex; align-items: flex-start; gap: var(--s-4); padding: 16px 18px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease-out);
}
a.cl:hover { border-color: var(--fg); transform: translateY(-2px); }
.cl b { display: block; font-weight: 500; font-size: var(--t-base); letter-spacing: -0.03em; }
.cl span { font-size: var(--t-sm); color: var(--muted); }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-8); box-shadow: var(--shadow-card); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld.full { grid-column: 1 / -1; }
.fld label { font-size: var(--t-sm); font-weight: 500; }
.fld input, .fld textarea {
  font-family: var(--font-body); font-size: var(--t-base); color: var(--fg);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 13px 15px; width: 100%; letter-spacing: -0.03em;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.fld textarea { min-height: 108px; resize: vertical; line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--faint); }
.fld input:focus, .fld textarea:focus { outline: none; background: var(--surface); border-color: var(--fg); box-shadow: 0 0 0 3px var(--accent-soft); }
.fld input:user-invalid, .fld textarea:user-invalid { border-color: var(--accent-ink); }
.consent { margin: var(--s-6) 0; }
.consent legend { font-size: var(--t-sm); font-weight: 500; padding: 0; margin-bottom: var(--s-3); }
.consent fieldset { border: 0; padding: 0; margin: 0; }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: var(--t-sm); color: var(--muted); cursor: pointer; }
.radio input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--accent-ink); cursor: pointer; }
.fld input[type="date"] { appearance: none; -webkit-appearance: none; }
.fld input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; transition: opacity 0.2s var(--ease); }
.fld input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.fld-hint { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; margin: 0; }
.consent { display: grid; gap: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--accent-ink); cursor: pointer; }
.check:hover { color: var(--fg); }
.check a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.check input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.check input:user-invalid { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.req { color: var(--accent-ink); }
.privacy-note { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; margin-bottom: var(--s-5); }
.privacy-note a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.form-msg { margin-top: var(--s-4); font-size: var(--t-sm); min-height: 1px; }
.form-msg.ok { color: var(--accent-ink); }
.form-msg.ko { color: var(--fg); font-weight: 500; }
.form-card.sent .fields, .form-card.sent .consent, .form-card.sent .privacy-note, .form-card.sent button { display: none; }
.form-card.sent .form-msg { margin-top: 0; font-size: var(--t-base); }

/* ═══ Footer ═══ */
footer { padding: var(--s-20) 0 var(--s-8); border-top: 1px solid var(--border); }
.foot { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--s-10); }
.foot .brand img { width: 152px; margin-bottom: var(--s-4); }
.foot p { font-size: var(--t-sm); color: var(--muted); max-width: 34ch; }
.foot h4 { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: var(--s-4); }
.foot a.fl { display: block; font-size: var(--t-sm); color: var(--muted); padding: 9px 0; transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.foot a.fl:hover { color: var(--fg); transform: translateX(3px); }
.foot-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid var(--border-soft); font-size: var(--t-xs); color: var(--faint); }
.foot-bot a:hover { color: var(--fg); }

/* ═══ Reveal ═══ */
.rv { opacity: 0; transform: translateY(24px); }
.rv.in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }

/* ═══ Responsive ═══ */
@media (max-width: 1100px) {
  section { padding: var(--s-20) 0; }
  .foot { grid-template-columns: 1fr 1fr; }
  .cat, .tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .panel { padding: var(--s-16) var(--s-8); }
}
@media (max-width: 1040px) {
  .nav-partner { display: none; }
  .fam, .feat, .price-grid { grid-template-columns: 1fr; }
  .feat.flip .feat-txt { order: 0; }
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .stage-inner > .app { rotate: -1.6deg; }
  .app-alt { position: static; width: 100%; max-width: 480px; margin: var(--s-8) auto 0; rotate: 2.4deg; }
  .nav-menu, .mega, .nav-partner { display: none; }
  .page-hero { padding-top: 138px; }
  .page-hero .hero-cta .btn { width: 100%; }
  .nav-right > .btn { display: none; }
  .burger { display: inline-flex; }
  .g2, .g3, .cat, .tpl-grid, .formula-cards { grid-template-columns: 1fr; }
  .split, .contact { grid-template-columns: 1fr; gap: var(--s-8); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .adv-grid { grid-template-columns: 1fr; }
  .sheet-body { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero { padding-top: 138px; }
  .hero-cta .btn { width: 100%; }
  .card, .form-card { padding: var(--s-6); }
  .panel { padding: var(--s-12) var(--s-5); border-radius: var(--r-lg); }
  .stats { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .brand img { width: 112px; }
  .icon-btn { width: 44px; height: 44px; }
  .btn-sm { min-height: 44px; }
  .nav-right .lang { display: none; }
  .sh-lang { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ═══ Logo: swap per tema ═══ */
[data-theme="light"] .lg-dark { display: none; }
[data-theme="dark"]  .lg-light { display: none; }

/* ═══ Pagine interne ═══ */
.page-hero { padding: 172px 0 var(--s-16); position: relative; overflow-x: clip; }
.page-hero::before {
  content: ""; position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 980px; height: 640px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-tint) 0%, transparent 66%);
}
.page-hero > * { position: relative; }
.page-hero h1 { margin: var(--s-6) 0 var(--s-5); max-width: 18ch; }
.page-hero .lead { font-size: var(--t-lg); max-width: 56ch; }
.page-hero .hero-cta { justify-content: flex-start; margin-top: var(--s-8); }
.page-hero .hero-chips { justify-content: flex-start; }
.crumb { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--faint); }
.crumb a:hover { color: var(--fg); }
.toc { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-10); padding-top: var(--s-8); border-top: 1px solid var(--border); }
.toc a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--glass);
  font-size: var(--t-sm); color: var(--muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.toc a:hover { color: var(--fg); border-color: var(--fg); transform: translateY(-2px); }
.toc a.active { color: var(--fg); background: var(--surface); border-color: var(--fg); }
.toc a.active .n { color: var(--muted); }
.toc a .n { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }

/* alternanza di fondo tra sezioni lunghe */
.band { background: var(--surface-2); border-block: 1px solid var(--border); }
.band + .band { border-top: 0; }

/* riga funzione: testo + visual */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; }
.feat.flip .feat-txt { order: 2; }
.feat-txt h2 { margin-bottom: var(--s-4); }
.feat-list { display: grid; gap: var(--s-4); list-style: none; padding: 0; margin: var(--s-8) 0 0; }
.feat-list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); color: var(--muted); }
.feat-list li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--muted); }
.feat-list li b { color: var(--fg); font-weight: 500; }

/* schede prodotto in home */
.fam { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.fam-card {
  display: flex; flex-direction: column; padding: var(--s-10) var(--s-8);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.fam-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.fam-card .ft { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.fam-card h3 { font-size: var(--t-xl); letter-spacing: -0.04em; margin: 12px 0 10px; }
.fam-card p { font-size: var(--t-base); color: var(--muted); }
.fam-card ul { list-style: none; padding: 0; margin: var(--s-6) 0 var(--s-8); display: grid; gap: 9px; }
.fam-card li { font-size: var(--t-sm); color: var(--muted); padding-left: 18px; position: relative; }
.fam-card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--accent); }
.fam-card .link-arrow { margin-top: auto; }

/* striscia CTA di chiusura */
.cta-strip { text-align: center; }
.cta-strip h2 { max-width: 20ch; margin: 0 auto var(--s-5); }
.cta-strip .lead { margin: 0 auto var(--s-8); text-align: center; }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--s-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.plan.hot { background: var(--panel-bg); color: var(--panel-fg); border-color: var(--panel-line); box-shadow: var(--shadow-card); }
.plan.hot h3 { color: var(--panel-fg); }
.plan.hot .sub, .plan.hot li, .plan.hot .amount small { color: var(--panel-muted); }
.plan.hot li svg { color: var(--panel-muted); }
.hot-tag { position: absolute; top: var(--s-6); right: var(--s-6); font-size: 11px; font-weight: 500; padding: 4px 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--panel-bg); }
.plan h3 { font-size: var(--t-lg); letter-spacing: -0.04em; }
.plan .sub { font-size: var(--t-sm); color: var(--muted); margin-top: 8px; min-height: 44px; }
.plan .amount { font-family: var(--font-display); font-size: var(--t-xl); letter-spacing: -0.025em; margin: var(--s-5) 0 2px; }
.plan .amount small { display: block; font-family: var(--font-body); font-size: var(--t-sm); letter-spacing: -0.03em; color: var(--muted); margin-top: 6px; }
.plan ul { list-style: none; padding: 0; margin: var(--s-6) 0 var(--s-8); display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--muted); }
.plan li svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--muted); }
.plan .btn { margin-top: auto; }
.btn-invert { background: var(--panel-fg); color: var(--panel-bg); }
.btn-invert:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ═══ Mock d'interfaccia ═══
   Usati solo dove non esiste uno screenshot reale della funzione.
   Restano diagrammi onesti: nessun dato dichiarato come misurato. */
.mock {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-soft);
}
.mock-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.mock-top b { font-size: var(--t-sm); font-weight: 500; letter-spacing: -0.03em; }
.mock-note { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--faint); }

/* calendario di pubblicazione */
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-head span { font-family: var(--font-mono); font-size: 10px; color: var(--faint); text-align: center; padding-bottom: 6px; }
.cal-grid { margin-top: 0; }
.cal-d {
  aspect-ratio: 1; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-2); padding: 5px 6px;
  font-family: var(--font-mono); font-size: 9px; color: var(--faint);
  display: flex; flex-direction: column; gap: 3px;
}
.cal-d.out { opacity: 0.4; }
.cal-d.on { border-color: var(--accent); background: var(--accent-tint); color: var(--fg); }
.cal-bar { height: 4px; border-radius: 2px; background: var(--border-soft); margin-top: auto; }
.cal-bar.a { background: var(--accent); }
.cal-bar.b { background: color-mix(in oklch, var(--fg) 45%, transparent); }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5); font-size: var(--t-xs); color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal-legend i { width: 12px; height: 4px; border-radius: 2px; display: block; background: var(--border-soft); }
.cal-legend i.a { background: var(--accent); }
.cal-legend i.b { background: color-mix(in oklch, var(--fg) 45%, transparent); }

/* barre (statistiche) */
.bars { display: flex; align-items: flex-end; gap: 7px; height: 132px; }
.bars .b { flex: 1; border-radius: 3px 3px 0 0; background: var(--accent); opacity: 0.85; }
.bars .b.alt { background: color-mix(in oklch, var(--fg) 32%, transparent); }
.bars-x { display: flex; gap: 7px; margin-top: 8px; }
.bars-x span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 9px; color: var(--faint); }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.kpi { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.kpi .kl { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.kpi .kv { font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: -0.025em; margin-top: 4px; }

/* ricerca pesata */
.srch-in {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--fg); border-radius: var(--r-pill); font-size: var(--t-sm);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.srch-in svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.srch-res { display: grid; gap: 8px; margin-top: var(--s-5); }
.srch-r { display: grid; grid-template-columns: 1fr 84px; gap: var(--s-4); align-items: center; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); }
.srch-r b { display: block; font-size: var(--t-sm); font-weight: 500; letter-spacing: -0.03em; }
.srch-r span { font-size: var(--t-xs); color: var(--muted); }
.srch-w { height: 6px; border-radius: 3px; background: var(--border-soft); overflow: hidden; }
.srch-w i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* elenco puntato cloud, dentro il pannello scuro */
.cloud-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-10); }
.cloud-row {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: 16px 20px; border-radius: var(--r-md);
  background: var(--panel-row); border: 1px solid var(--panel-line);
  transition: background 0.35s var(--ease);
}
.cloud-row:hover { background: var(--panel-row-h); }
.cloud-row .ci { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--panel-row-h); color: var(--accent); display: grid; place-items: center; }
.cloud-row .ci svg { width: 15px; height: 15px; }
.cloud-row b { display: block; font-weight: 500; font-size: var(--t-base); letter-spacing: -0.03em; }
.cloud-row span { font-size: var(--t-sm); color: var(--panel-muted); }

@media (max-width: 900px) {
  .cloud-grid, .kpi-row { grid-template-columns: 1fr; }
}

/* ═══ Ticket ricompensa (rappresentazione, non uno scontrino reale) ═══ */
.ticket {
  max-width: 272px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: var(--s-6) var(--s-5) var(--s-5);
  box-shadow: var(--shadow-card);
  font-family: var(--font-mono); text-align: center;
}
.ticket .tk-brand { font-family: var(--font-display); font-size: var(--t-base); letter-spacing: 0.14em; text-transform: uppercase; }
.ticket .tk-rule { border: 0; border-top: 1px dashed var(--border-soft); margin: var(--s-4) 0; }
.ticket .tk-lbl { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.ticket .tk-code { font-family: var(--font-display); font-size: var(--t-xl); letter-spacing: -0.02em; margin-top: 5px; }
.ticket .tk-bars { display: flex; gap: 2px; justify-content: center; align-items: stretch; height: 40px; margin: var(--s-5) 0 var(--s-3); }
.ticket .tk-bars i { display: block; background: var(--fg); border-radius: 1px; }
.ticket .tk-foot { font-size: 10px; color: var(--muted); line-height: 1.5; }

/* ═══ Confronto impianti (diagramma, non uno screenshot) ═══ */
.cmp { display: grid; gap: var(--s-5); }
.cmp-row { display: grid; gap: var(--s-3); }
.cmp-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.cmp-boxes { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-2); }
.cmp-box {
  flex: 1; min-width: 96px; padding: 14px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
  font-size: var(--t-sm); line-height: 1.3; color: var(--muted);
}
.cmp-box small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-top: 5px; }
.cmp-box.lit { background: var(--accent-tint); border-color: var(--accent); color: var(--fg); }
.cmp-box.lit small { color: var(--muted); }
.cmp-plus { align-self: center; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--faint); flex: none; }
.cmp-row.on .cmp-lbl { color: var(--fg); }

/* ═══ Powered by ═══ */
.powered { margin-top: var(--s-8); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.powered .lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.powered a { display: block; transition: opacity 0.3s var(--ease); opacity: 0.9; }
.powered a:hover { opacity: 1; }
.powered img { width: 150px; height: auto; }

/* ═══ Comandi del rotatore in hero ═══ */
.hs-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.hs-bar i { display: block; height: 100%; width: 0; background: var(--fg); border-radius: 2px; }
.hs-count { font-family: var(--font-mono); font-size: 11px; color: var(--faint); flex: none; }
.hs-count b { color: var(--fg); font-weight: 500; }
.hs-btn {
  width: 26px; height: 26px; flex: none; border-radius: var(--r-circle);
  border: 1px solid var(--border); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hs-btn:hover { color: var(--fg); border-color: var(--fg); }
.hs-btn svg { width: 12px; height: 12px; }
.hs-btn .ic-pause { display: none; }
.hs-btn[aria-pressed="true"] .ic-play { display: none; }
.hs-btn[aria-pressed="true"] .ic-pause { display: block; }
@media (max-width: 560px) {
  .hero-ctl { gap: var(--s-3); }
  .hero-ctl .hs-bar { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 0.01ms; transform: none; }
}

/* ═══ Rifiniture mobile ═══════════════════════════════════════════
   In coda al file di proposito: deve vincere sulle regole dei
   componenti dichiarate dopo il blocco «Responsive». */

@media (max-width: 1040px) {
  /* Queste regole esistono già nel blocco «Responsive» (L806-811), ma i
     componenti sono dichiarati più in basso nel foglio e, a parità di
     specificità, vincevano loro: .feat e .price-grid restavano a due
     colonne strette a qualsiasi larghezza, e nelle sezioni «flip»
     l'immagine finiva prima del testo. Ridichiarate qui in coda. */
  .fam, .feat, .price-grid { grid-template-columns: 1fr; }
  .feat.flip .feat-txt { order: 0; }
}

@media (max-width: 900px) {
  /* Quando lo stage si impila, la finestra secondaria deve prendere
     tutta la colonna: con width:64% restava una scheda a metà,
     sospesa e disallineata sotto quella principale. */
  .hero-split .app-alt { width: 100%; right: auto; bottom: auto; }
}

@media (max-width: 560px) {
  /* Mock ruotati: su schermi stretti gli angoli escono dal margine
     della pagina e vengono tagliati da overflow-x. Qui si appiattiscono. */
  .stage-inner > .app, .app-alt { rotate: none; }

  /* Barra del browser finto: l'URL non deve spanciare né mandare
     a capo la barra quando lo spazio si stringe. */
  .app-url { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Piani: sotto i 400px il badge assoluto finiva sopra il titolo. */
  .plan { padding: var(--s-6); }
  .hot-tag { position: static; align-self: flex-start; margin-bottom: var(--s-3); }

  /* Mock ricerca: barra del peso più stretta, così il titolo del
     risultato non si spezza in quattro righe. */
  .mock { padding: var(--s-5); }
  .srch-r { grid-template-columns: 1fr 56px; gap: var(--s-3); }

  /* Feature: il gap da due colonne è troppo largo una volta impilate. */
  .feat { gap: var(--s-8); }
}

/* ═══ Trappola anti-spam: campo reale, fuori dal viewport e fuori dal tab order.
   Se arriva compilato, l'ha compilato un bot. ═══ */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none; }

/* ═══ Stili aggiunti dopo ═══
   Questo file è tuo: la build lo concatena in coda a 10-site.css, quindi le
   sue regole vincono a parità di specificità.

   Usa i token esistenti (--accent, --fg, --border…): un colore scritto a
   mano funziona nel tema chiaro e si rompe in quello scuro. Se serve una
   tinta nuova, dichiarala come token in entrambi i temi.

   Ricorda la regola sul verde: --accent per le campiture, --accent-ink per
   tutto ciò che si legge. ═══ */