/* Caratteri serviti dal dominio del sito. Nessuna richiesta verso reti esterne. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/jakarta-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/jakarta-latin-ext.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/jakarta-latin.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;
}

/* AtomicBI, sito istituzionale. Token, reset e tipografia. */

:root {
  color-scheme: dark;

  /* Superfici */
  --bg: #08090c;
  --bg-soft: #0b0d12;
  --surface: #0f1218;
  --surface-2: #141821;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Testo */
  --fg: #f2f4f8;
  --fg-2: #a8b0bf;
  --fg-3: #6d7686;

  /* Accento sobrio, nessuna saturazione fluorescente */
  --accent: #F1484D;
  --accent-soft: #FF8A8D;
  --accent-line: rgba(241, 72, 77, 0.28);
  --accent-wash: rgba(241, 72, 77, 0.08);

  /* Tipografia */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Ritmo */
  --page: 1200px;
  --gutter: 24px;
  --radius: 14px;
  --radius-lg: 20px;

  /* Ombre neutre, nessun alone colorato */
  --shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); letter-spacing: -0.012em; }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--accent-soft);
  text-decoration: none;
  transition: color 180ms ease;
}
a:hover { color: #a9cbff; }

img { max-width: 100%; display: block; }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

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

::selection { background: rgba(76, 141, 255, 0.28); }

/* Impaginazione */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 9vw, 116px); }
.section--tight { padding-block: clamp(48px, 6vw, 76px); }
.section--line { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent-line);
}

.lede {
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  line-height: 1.68;
  color: var(--fg-2);
  max-width: 62ch;
}

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head p { margin-top: 16px; }

.muted { color: var(--fg-3); }
.small { font-size: 0.86rem; line-height: 1.62; }

/* Pulsanti */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  white-space: nowrap;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
}
.btn--primary:hover { background: #3d7cf0; color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.24); color: var(--fg); }

.btn--sm { min-height: 38px; padding: 0 16px; font-size: 0.88rem; }

.btn svg { width: 16px; height: 16px; flex: none; }

/* Rivelazione allo scroll */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  padding: 10px 16px;
  border-radius: 8px;
  transition: top 180ms ease;
}
.skip-link:focus { top: 16px; }

/* AtomicBI, sito istituzionale. Componenti. */

/* ---------- Navigazione ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(8, 9, 12, 0.78);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  transition: opacity 180ms ease;
}
.brand:hover { opacity: 0.82; }
.brand img { height: 34px; width: auto; }
.brand--foot img { height: 40px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline-start: auto;
}
.nav__links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg-2);
}
.nav__links a:hover { color: var(--fg); }

.nav__actions { display: flex; align-items: center; gap: 12px; flex: none; }

.lang {
  position: relative;
}
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--fg-2);
  transition: border-color 180ms ease, color 180ms ease;
}
.lang__btn:hover { color: var(--fg); border-color: rgba(255, 255, 255, 0.24); }
.lang__btn svg { width: 15px; height: 15px; }

.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 172px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: none;
}
.lang[data-open='true'] .lang__menu { display: block; }
.lang__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--fg-2);
}
.lang__menu a:hover { background: rgba(255, 255, 255, 0.05); color: var(--fg); }
.lang__menu a[aria-current='true'] { color: var(--accent-soft); }
.lang__code { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--fg-3); font-family: var(--font-mono); }

.nav__toggle { display: none; }

@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__inner { gap: 14px; }
  .nav__actions { margin-inline-start: auto; }
}
@media (max-width: 420px) {
  .nav__actions { gap: 8px; }
  .nav__actions .btn { padding: 0 12px; }
  .lang__btn { padding: 0 9px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 96px) 0;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20% 20% auto 20%;
  height: 520px;
  background: radial-gradient(ellipse at 50% 0%, rgba(241, 72, 77, 0.13), transparent 68%);
  pointer-events: none;
}
.hero__inner { position: relative; text-align: center; }
.hero h1 { max-width: 17ch; margin-inline: auto; }
.hero .lede { margin: 22px auto 0; text-align: center; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.hero__note {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--fg-3);
}
.hero__shot { margin-top: clamp(44px, 6vw, 68px); }

/* ---------- Cornice prodotto ---------- */

.shot {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding-inline: 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.shot__dots { display: flex; gap: 6px; flex: none; }
.shot__dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.shot__url {
  flex: 1;
  max-width: 300px;
  margin-inline: auto;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.shot__body { background: var(--bg-soft); }

/* Applicazione simulata */

.app { display: grid; grid-template-columns: 186px 1fr; min-height: 430px; }

.app__side {
  border-inline-end: 1px solid var(--line);
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.012);
}
.app__side-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 6px 10px 10px;
}
.app__nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 0.78rem;
  color: var(--fg-2);
  line-height: 1.3;
}
.app__nav svg { width: 14px; height: 14px; flex: none; color: var(--fg-3); }
.app__nav--on { background: var(--accent-wash); color: var(--fg); }
.app__nav--on svg { color: var(--accent-soft); }

.app__main { padding: 18px 20px 22px; min-width: 0; }

.app__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.app__title { font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; }
.app__chips { display: flex; gap: 6px; margin-inline-start: auto; flex-wrap: wrap; }
.chip {
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.7rem;
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.02);
}
.chip--on { border-color: var(--accent-line); color: var(--accent-soft); background: var(--accent-wash); }

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.kpi {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.018);
}
.kpi__k { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-3); }
.kpi__v { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; margin-top: 5px; letter-spacing: -0.02em; }
.kpi__d { font-size: 0.68rem; margin-top: 3px; color: var(--fg-3); }
.kpi__d--up { color: #4ec38a; }
.kpi__d--down { color: #e2795f; }

.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
  padding: 13px 14px;
}
.panel__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.panel__t { font-size: 0.76rem; font-weight: 600; color: var(--fg-2); }
.panel__s { font-size: 0.66rem; color: var(--fg-3); font-family: var(--font-mono); }

.grid-2 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; }

.bars { display: flex; align-items: flex-end; gap: 7px; height: 122px; }
.bars > span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(241, 72, 77, 0.85), rgba(241, 72, 77, 0.25));
  min-height: 4px;
}
.bars > span.is-alt { background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)); }
.bars-x { display: flex; gap: 7px; margin-top: 7px; }
.bars-x > span { flex: 1; text-align: center; font-size: 0.58rem; color: var(--fg-3); font-family: var(--font-mono); }

.spark { display: block; width: 100%; height: 122px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.tbl th {
  text-align: start;
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
.tbl td { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.045); color: var(--fg-2); }
.tbl td:last-child, .tbl th:last-child { text-align: end; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--font-mono); color: var(--fg); }

.tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tag--ok { background: rgba(78, 195, 138, 0.14); color: #6fd3a2; }
.tag--warn { background: rgba(226, 150, 95, 0.14); color: #e8a878; }
.tag--info { background: var(--accent-wash); color: var(--accent-soft); }

@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; min-height: 0; }
  .app__side { display: none; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .app__main { padding: 14px; }
}

/* ---------- Marchi ---------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 58px);
}
.logos img {
  height: 62px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  filter: grayscale(1) brightness(2.4) contrast(1.05);
  opacity: 0.62;
  transition: opacity 220ms ease;
}
.logos img:hover { opacity: 1; }
.logos-note { text-align: center; margin-top: 24px; }

/* ---------- Numeri ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--bg); padding: 26px 22px; }
.stat__v {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.stat__l { margin-top: 10px; font-size: 0.84rem; color: var(--fg-2); line-height: 1.5; }

/* ---------- Griglia moduli ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
}
.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: var(--surface);
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.card__icon { color: var(--accent-soft); grid-column: 2; grid-row: 1; }
.card__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.card h3 { grid-column: 1; grid-row: 1; }
.card p { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; font-size: 0.9rem; line-height: 1.62; color: var(--fg-2); }

/* ---------- Blocchi alternati ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.split + .split { margin-top: clamp(56px, 8vw, 104px); }

/* Nel blocco invertito il testo passa a destra: vanno invertite anche le
   proporzioni, altrimenti la schermata finisce nella colonna stretta. */
.split--flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.split--flip .split__text { order: 2; }
.split__text h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.split__text p { margin-top: 16px; color: var(--fg-2); font-size: 0.98rem; line-height: 1.68; }

.checklist { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.checklist li {
  display: flex;
  gap: 11px;
  font-size: 0.92rem;
  color: var(--fg-2);
  line-height: 1.55;
}
.checklist svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent-soft); stroke-width: 2; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--flip .split__text { order: 0; }
}

/* ---------- Flusso dati ---------- */

.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.flow__step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  background: var(--surface);
  position: relative;
}
.flow__n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-soft);
  letter-spacing: 0.1em;
}
.flow__step h3 { margin: 12px 0 9px; }
.flow__step p { font-size: 0.89rem; color: var(--fg-2); line-height: 1.6; }
.flow__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.flow__list li {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 8px;
}
@media (max-width: 880px) { .flow { grid-template-columns: 1fr; } }

/* ---------- Dispositivi ---------- */

.devices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 20px 0;
  overflow: hidden;
}
.device .card__icon { grid-column: 2; grid-row: 1; }
.device h3 { grid-column: 1; grid-row: 1; }
.device p { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; font-size: 0.88rem; color: var(--fg-2); line-height: 1.6; }
.device__frame { grid-column: 1 / -1; grid-row: 3; }
.device__frame {
  margin: 22px auto 0;
  width: 178px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: var(--bg-soft);
  padding: 8px 8px 0;
}
.device__notch {
  width: 54px; height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  margin: 2px auto 9px;
}
.device__screen { border-radius: 12px 12px 0 0; overflow: hidden; background: var(--bg); padding: 10px; min-height: 178px; }
.mini-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 8px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 7px;
  font-size: 0.6rem; color: var(--fg-2);
  background: rgba(255, 255, 255, 0.018);
}
.mini-row b { font-family: var(--font-mono); font-weight: 600; color: var(--fg); font-size: 0.62rem; }
.mini-h { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px; }
@media (max-width: 880px) { .devices { grid-template-columns: 1fr; } }

/* ---------- Sicurezza ---------- */

.secure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.secure__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--surface);
}
.secure__item svg { width: 20px; height: 20px; stroke-width: 1.5; color: var(--accent-soft); grid-column: 2; grid-row: 1; }
.secure__item h3 { grid-column: 1; grid-row: 1; font-size: 0.98rem; }
.secure__item p { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; font-size: 0.87rem; color: var(--fg-2); line-height: 1.6; }

/* ---------- Domande frequenti ---------- */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  text-align: start;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.faq__q svg { width: 18px; height: 18px; flex: none; color: var(--fg-3); transition: transform 220ms ease; }
.faq__item[data-open='true'] .faq__q svg { transform: rotate(45deg); }
.faq__a { overflow: hidden; height: 0; transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.faq__a > div { padding-bottom: 24px; max-width: 74ch; color: var(--fg-2); font-size: 0.94rem; line-height: 1.7; }

/* ---------- Richiamo finale ---------- */

.callout {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: clamp(38px, 6vw, 64px) clamp(24px, 5vw, 56px);
  text-align: center;
}
.callout h2 { max-width: 20ch; margin-inline: auto; }
.callout p { margin: 18px auto 0; max-width: 56ch; color: var(--fg-2); }
.callout__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- Piede ---------- */

.foot { border-top: 1px solid var(--line); background: var(--bg-soft); }
.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 36px;
  padding-block: 56px 40px;
}
.foot__about p { margin-top: 16px; font-size: 0.86rem; color: var(--fg-3); line-height: 1.7; max-width: 38ch; }
.foot__col h4 {
  font-family: var(--font-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 16px;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot__col a, .foot__col li { font-size: 0.87rem; color: var(--fg-2); }
.foot__col a:hover { color: var(--fg); }

.foot__legal {
  border-top: 1px solid var(--line);
  padding-block: 22px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--fg-3);
}
.foot__legal p { line-height: 1.7; }

.powered {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-2);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: border-color 180ms ease, color 180ms ease;
}
.powered:hover { color: var(--fg); border-color: var(--line-strong); }
.powered img { width: 17px; height: 17px; opacity: 0.9; }

@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .foot__about { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot__grid { grid-template-columns: 1fr; }
}

/* ---------- Avviso cookie ---------- */

.cookiebar {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 120;
  max-width: 620px;
  margin-inline: auto;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 22px;
  display: none;
}
.cookiebar[data-show='true'] { display: block; }
.cookiebar h2 { font-size: 1rem; margin-bottom: 10px; }
.cookiebar p { font-size: 0.86rem; color: var(--fg-2); line-height: 1.62; }
.cookiebar__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cookiebar__actions .btn { flex: 1 1 auto; min-width: 130px; }

.cookieprefs { margin-top: 18px; display: none; }
.cookiebar[data-prefs='true'] .cookieprefs { display: block; }
.cookieprefs__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.cookieprefs__row h3 { font-size: 0.86rem; margin-bottom: 4px; }
.cookieprefs__row p { font-size: 0.79rem; color: var(--fg-3); }
.switch { flex: none; margin-top: 2px; }
.switch input { position: absolute; opacity: 0; width: 40px; height: 22px; cursor: pointer; }
.switch input + span {
  display: block;
  width: 40px; height: 22px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--line-strong);
  position: relative;
  transition: background 180ms ease;
}
.switch input + span::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--fg-2);
  transition: transform 180ms ease, background 180ms ease;
}
.switch input:checked + span { background: var(--accent); border-color: transparent; }
.switch input:checked + span::after { transform: translateX(18px); background: #fff; }
.switch input:disabled + span { opacity: 0.55; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Pagine legali ---------- */

.legal { max-width: 820px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.legal__meta { margin-top: 16px; font-size: 0.84rem; color: var(--fg-3); }
.legal h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1rem; margin-top: 28px; }
.legal p, .legal li { color: var(--fg-2); font-size: 0.95rem; line-height: 1.75; }
.legal p { margin-top: 14px; }
.legal ul, .legal ol { margin: 14px 0 0; padding-inline-start: 22px; display: grid; gap: 9px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.87rem; display: block; overflow-x: auto; }
.legal thead { display: table-header-group; }
.legal tbody { display: table-row-group; }
.legal tr { display: table-row; }
.legal th, .legal td {
  text-align: start;
  padding: 11px 14px;
  border: 1px solid var(--line);
  vertical-align: top;
  display: table-cell;
}
.legal th { background: var(--surface); font-weight: 600; color: var(--fg); font-size: 0.8rem; }
.legal td { color: var(--fg-2); }
.legal__box {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
}
.legal__box p:first-child { margin-top: 0; }

/* ---------- Righe elenco nelle schermate ---------- */

.listrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.listrow:last-child { border-bottom: 0; }
.listrow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.listrow__n { font-size: 0.75rem; color: var(--fg); }
.listrow__m { font-size: 0.65rem; color: var(--fg-3); font-family: var(--font-mono); }

/* ---------- Assistente nelle schermate ---------- */

.chat { display: flex; flex-direction: column; gap: 10px; }
.msg {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.018);
}
.msg--you {
  align-self: flex-end;
  max-width: 76%;
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--fg);
}
.msg--ai { align-self: stretch; }
.msg p { margin: 0; }
.msg__note { margin-top: 9px; font-size: 0.66rem; color: var(--fg-3); }
.msgtable { margin-top: 10px; border-top: 1px solid var(--line); }
.msgrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  font-size: 0.72rem;
}
.msgrow:last-child { border-bottom: 0; }
.msgrow b { font-family: var(--font-mono); font-weight: 600; color: var(--fg); }
.askbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.73rem;
  color: var(--fg-3);
  background: rgba(255, 255, 255, 0.02);
}
.askbar svg { width: 15px; height: 15px; color: var(--fg-3); flex: none; }

/* Altezze delle barre di esempio, tenute qui invece che negli attributi
   in linea: il criterio di sicurezza del sito vieta lo stile in linea. */
.bars > span:nth-child(1) { height: 46%; }
.bars > span:nth-child(2) { height: 62%; }
.bars > span:nth-child(3) { height: 54%; }
.bars > span:nth-child(4) { height: 71%; }
.bars > span:nth-child(5) { height: 88%; }
.bars > span:nth-child(6) { height: 100%; }
.bars > span:nth-child(7) { height: 79%; }

.panel--gap { margin-bottom: 10px; }
.eyebrow--center { display: flex; justify-content: center; }

/* Il pulsante di salvataggio compare solo quando le categorie sono aperte,
   cosi la scelta rapida resta a due opzioni con lo stesso peso visivo. */
.cookiebar [data-cookie='save'] { display: none; }
.cookiebar[data-prefs='true'] [data-cookie='save'] { display: inline-flex; }
.cookiebar[data-prefs='true'] [data-cookie='customise'] { display: none; }

@media (max-width: 520px) {
  .cookiebar { padding: 18px; inset-inline: 10px; bottom: 10px; }
  .cookiebar__actions .btn { min-width: 100%; }
}

/* Le schermate affiancate al testo hanno meno larghezza di quella in evidenza.
   Si adattano al contenitore, non alla finestra, cosi restano leggibili
   qualunque sia il punto di rottura del blocco che le contiene. */
.split__media { container-type: inline-size; }

@container (max-width: 720px) {
  .split__media .kpis { grid-template-columns: repeat(2, 1fr); }
  .split__media .app { grid-template-columns: 168px 1fr; }
  .split__media .app__nav { font-size: 0.74rem; }
  .split__media .app__main { padding: 16px 16px 18px; }
}

@container (max-width: 460px) {
  .split__media .app { grid-template-columns: 1fr; }
  .split__media .app__side { display: none; }
}

/* Cornice a finestra per la scheda web, cosi le tre schede non mostrano
   tutte lo stesso telefono. */
.device__frame--window { border-radius: 12px 12px 0 0; padding-top: 0; }
.device__dots { display: flex; gap: 5px; padding: 9px 4px 8px; }
.device__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.device__frame--window .device__screen { border-radius: 8px 8px 0 0; }

/* Nel riquadro dei recapiti le righe sono un blocco unico, non paragrafi
   distanti: vanno strette come un indirizzo su carta intestata. */
.legal__box p + p { margin-top: 4px; }

/* I titoli dei moduli occupano una o due righe: riservare l'altezza di due
   allinea l'inizio dei paragrafi su tutta la griglia. */
@media (min-width: 640px) {
  .card h3 { min-height: 2.24em; }
}