/* ============================================================================
   Sadie | an MPS Monitor Solution — Design System
   Palette derivata dagli screenshot del prodotto (dashboard Sadie),
   dal rosso dell'atomo MPS Monitor (#B11D1C) e dal blu corporate (#194184).

   DUE TEMI: chiaro (predefinito) e scuro, sotto [data-theme="dark"].
   Nessun colore va scritto a mano nelle regole: sempre tramite variabile,
   altrimenti il tema scuro non lo segue.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand ------------------------------------------------------------ */
  --red:          #C41F22;  /* primario Sadie: fondi di bottoni e accenti   */
  --red-600:      #A81A1C;  /* hover                                        */
  --red-800:      #8E1917;  /* rosso profondo                                */
  --red-mps:      #B11D1C;  /* rosso corporate MPS Monitor (logo atomo)      */
  --red-ink:      #C41F22;  /* rosso usato come TESTO (cambia nel tema scuro)*/
  --red-tint:     #FDF1F1;  /* fondo tenue per icone / badge                 */
  --red-tint-2:   #F9E2E2;  /* bordo tenue                                   */

  --blue:         #194184;  /* blu corporate MPS Monitor                     */
  --blue-ink:     #194184;  /* blu come testo                                */
  --blue-tint:    #E9EFF9;

  --cyan:         #1FC0DC;  /* accento dei grafici della dashboard           */
  --cyan-tint:    #E8FAFD;

  --silver:       #C3CAD2;  /* orbite dell'atomo MPS                         */
  --silver-dark:  #8E959E;

  /* --- Neutrali --------------------------------------------------------- */
  --ink:          #14181F;  /* titoli                                        */
  --body:         #38414E;  /* testo corrente                                */
  --muted:        #6B7684;  /* testo secondario                              */
  --line:         #E4E7EC;  /* bordi                                         */
  --line-soft:    #F0F2F5;
  --line-strong:  #D9DDE3;  /* bordo card in hover                           */
  --surface:      #FFFFFF;
  --bg:           #FAFAFA;  /* fondo pagina (come dashboard)                 */
  --bg-alt:       #F5F6F8;  /* sezioni alternate                             */
  --hero-top:     #FFFFFF;  /* partenza del gradiente dell'hero              */
  --header-bg:    rgba(255,255,255,.92);
  --dark:         #141A22;  /* sezione "Prova Sadie" e footer                */
  --dark-2:       #1D2530;

  --green:        #16A34A;
  --green-tint:   #E9F7EF;

  /* --- Componenti ------------------------------------------------------- */
  --uc-today-bg:   #FEF6F6;
  --tag-today-bg:  #F7D7D7;
  --tag-today-ink: #8E1917;
  --tag-sadie-bg:  #C7EBD5;
  --tag-sadie-ink: #0F7237;
  --soon-bg:       var(--blue-tint);   /* badge "In arrivo": blu MPS Monitor */
  --soon-ink:      var(--blue-ink);

  /* --- Tipografia ------------------------------------------------------- */
  --font-display: 'Sen', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* --- Forme ------------------------------------------------------------ */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(20,24,31,.06);
  --sh:    0 2px 8px rgba(20,24,31,.07);
  --sh-md: 0 8px 24px rgba(20,24,31,.09);
  --sh-lg: 0 20px 48px rgba(20,24,31,.12);

  --header-h: 74px;
  --wrap: 1160px;
}

/* ============================================================================
   TEMA SCURO
   Il rosso pieno (#C41F22) su fondo scuro non passa i minimi di contrasto:
   come testo diventa un rosso chiaro (--red-ink), mentre come fondo di
   bottone si schiarisce quel tanto che basta. Stessa logica per il blu.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --red:          #D8352F;
  --red-600:      #E6493F;
  --red-800:      #B02420;
  --red-ink:      #FF8B83;
  --red-tint:     rgba(255,139,131,.13);
  --red-tint-2:   rgba(255,139,131,.30);

  --blue-ink:     #93B4EF;
  --blue-tint:    rgba(147,180,239,.15);

  --cyan:         #3FD3EC;
  --cyan-tint:    rgba(63,211,236,.14);

  --ink:          #F1F4F8;
  --body:         #C0C9D5;
  --muted:        #8A95A4;
  --line:         #262F3B;
  --line-soft:    #1D2530;
  --line-strong:  #36424F;
  --surface:      #19212D;   /* card e pannelli: piu' chiari della pagina  */
  --bg:           #0D121A;   /* base della pagina                            */
  --bg-alt:       #101826;
  --hero-top:     #101826;
  --header-bg:    rgba(13,18,26,.90);

  /* Bagliori: rosso e blu della palette, schiariti quel tanto che basta
     per leggersi su fondo scuro. Servono a rompere il nero piatto.      */
  --glow-red:     rgba(216,53,47,.26);
  --glow-red-2:   rgba(216,53,47,.16);
  --glow-blue:    rgba(37,86,176,.40);
  --glow-blue-2:  rgba(37,86,176,.24);
  --grid-line:    rgba(255,255,255,.045);
  --dark:         #182029;   /* qui il pannello scuro deve risultare PIU'    */
  --dark-2:       #212B37;   /* chiaro della pagina, non piu' scuro          */

  --green:        #4ADE80;
  --green-tint:   rgba(74,222,128,.12);

  --uc-today-bg:   rgba(216,53,47,.10);
  --tag-today-bg:  rgba(216,53,47,.24);
  --tag-today-ink: #FFB3AD;
  --tag-sadie-bg:  rgba(74,222,128,.20);
  --tag-sadie-ink: #86EFAC;
  --soon-bg:       rgba(147,180,239,.15);
  --soon-ink:      #A9C5F2;

  --sh-sm: 0 1px 2px rgba(0,0,0,.40);
  --sh:    0 2px 8px rgba(0,0,0,.40);
  --sh-md: 0 8px 24px rgba(0,0,0,.45);
  --sh-lg: 0 20px 48px rgba(0,0,0,.50);
}

/* Il marchio è rosso pieno: su fondo scuro va schiarito per restare vivo. */
[data-theme="dark"] .brand__mark { filter: brightness(1.3) saturate(1.05); }

/* Gli screenshot del prodotto hanno interfaccia chiara: un filo di bordo
   evita che "sfondino" sulla pagina scura. */
[data-theme="dark"] .shot img { opacity: .94; }
[data-theme="dark"] .shot:hover img { opacity: 1; }

/* ============================ Reset =============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--red-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.16rem; letter-spacing: -.005em; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .35rem; }

/* ============================ Layout ============================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding: 84px 0; }
.section--tight { padding: 60px 0; }
.section--alt { background: var(--bg-alt); }
.section--soft { background: var(--bg); }
.section--dark { background: var(--dark); color: #C9D1DB; }

/* Sezione di arrivo (il form). Sulla landing sostituisce la vecchia fascia
   scura "Prova Sadie": stessa funzione di ancora visiva, ma chiara, perche'
   deve ospitare il form Pipedrive che ha fondo bianco. */
.section--accent {
  background:
    radial-gradient(44rem 30rem at 94% 38%, rgba(196,31,34,.055), transparent 66%),
    radial-gradient(40rem 28rem at 3% 64%, rgba(25,65,132,.06), transparent 66%),
    linear-gradient(170deg, #FFFFFF 0%, #F3F5FA 55%, #FBFCFD 100%);
}
.section--dark h2, .section--dark h3 { color: #fff; }
.section + .section:not(.section--alt):not(.section--dark):not(.section--soft):not(.section--accent) { border-top: 1px solid var(--line-soft); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-ink); margin: 0 0 14px;
}
.section--dark .eyebrow { color: #F0A6A0; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }
.section-head { max-width: 720px; margin-bottom: 46px; }
.center { text-align: center; margin-inline: auto; }

/* ============================ Buttons ============================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  padding: 12px 22px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .08s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red); color: #fff; box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--red-600); color: #fff; }
.btn--ghost { background: transparent; color: var(--body); border-color: var(--line); }
.btn--ghost:hover { color: var(--red-ink); border-color: var(--red-tint-2); background: var(--red-tint); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #F2F4F7; color: var(--ink); }
.btn--sm { padding: 8px 16px; font-size: .875rem; }
.btn--lg { padding: 15px 30px; font-size: 1.02rem; }

/* ============================ Header ============================== */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--header-bg);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { box-shadow: var(--sh-sm); }
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 22px;
}

/* --- Logo lockup ------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand__text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
}
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  color: var(--ink); letter-spacing: -.02em; line-height: 1;
}
.brand__rule { display: none; }
.brand__tag {
  font-family: var(--font-body); font-size: .5rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  line-height: 1.2; white-space: nowrap;
}
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__tag { color: #8A94A3; }
.brand--footer .brand__rule { background: #333C49; }

/* --- Nav --------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* Contenitore che su desktop non esiste (display:contents) e sotto la soglia
   dell'hamburger diventa il pannello a tendina con menu, lingue e tema. */
.nav__panel { display: contents; }
.nav__links { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: .9rem; font-weight: 500; color: var(--body); white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav__links a:hover { color: var(--red-ink); text-decoration: none; }
.nav__links a.is-active { color: var(--red-ink); border-bottom-color: var(--red-ink); }
.nav__actions { display: flex; align-items: center; gap: 8px; }

/* --- Language switcher (bandierine, in alto a destra) ------------------- */
.langs { display: flex; align-items: center; gap: 2px; padding-right: 6px; border-right: 1px solid var(--line); margin-right: 4px; }
.lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); transition: background .12s, color .12s, border-color .12s;
}
.lang:hover { background: var(--red-tint); color: var(--red-ink); border-color: var(--red-tint-2); text-decoration: none; }
.lang[aria-current="true"] { background: var(--red-tint); color: var(--red-ink); border-color: var(--red-tint-2); }
.lang img, .lang svg { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(20,24,31,.10); flex-shrink: 0; }
.lang__code { display: none; }

/* --- Mobile burger ----------------------------------------------------- */
.burger {
  display: none; width: 42px; height: 42px; margin-left: auto;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* ============================ Hero ================================ */
.hero { padding: 76px 0 88px; background: linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lede { font-size: 1.18rem; color: var(--body); }
.hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.hero__aside { font-size: .93rem; color: var(--muted); }
.hero__aside strong { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* --- Widget "chiamata in corso" ---------------------------------------- */
.callcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); padding: 22px; font-size: .93rem;
}
.callcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.callcard__live { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.callcard__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-tint); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.callcard__timer { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.callcard__wave { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-bottom: 20px; }
.callcard__wave i { flex: 1; background: var(--red-tint-2); border-radius: 2px; display: block; }
.callcard__line + .callcard__line { margin-top: 14px; }
.callcard__who { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.callcard__line--sadie .callcard__who { color: var(--red-ink); }
.callcard__line p { margin: 0; color: var(--ink); line-height: 1.55; }

/* ============================ Grids =============================== */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* colonna del form piu' larga della colonna di testo: i form Pipedrive
   a due colonne hanno bisogno di spazio */
.grid--form { grid-template-columns: .82fr 1.18fr; }

/* --- Card generica ------------------------------------------------------ */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; transition: box-shadow .18s, border-color .18s, transform .18s;
}
.card:hover { box-shadow: var(--sh-md); border-color: var(--line-strong); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card__num {
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; color: var(--red-ink); display: block; margin-bottom: 10px;
}
.card--plain { border: 0; padding: 0; background: none; }
.card--plain:hover { box-shadow: none; transform: none; }
.card--flat:hover { transform: none; }

/* --- Card icona --------------------------------------------------------- */
.icon-badge {
  width: 42px; height: 42px; border-radius: 10px; background: var(--red-tint);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.icon-badge svg { width: 21px; height: 21px; stroke: var(--red-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- Confronto Oggi / Sadie (use cases) --------------------------------- */
.uc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.uc__head { padding: 18px 22px 14px; border-bottom: 1px solid var(--line-soft); }
.uc__head h3 { margin: 0; font-size: 1.05rem; }
.uc__row { display: flex; gap: 12px; padding: 16px 22px; font-size: .92rem; line-height: 1.5; }
.uc__row + .uc__row { border-top: 1px solid var(--line-soft); }
.uc__row--today { background: var(--uc-today-bg); color: var(--body); }
.uc__row--sadie { background: var(--green-tint); color: var(--body); flex: 1; }
.tag {
  flex-shrink: 0; align-self: flex-start; font-size: .6rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 5px;
}
.tag--today { background: var(--tag-today-bg); color: var(--tag-today-ink); }
.tag--sadie { background: var(--tag-sadie-bg); color: var(--tag-sadie-ink); }

/* --- Steps numerati ----------------------------------------------------- */
.steps { counter-reset: s; }
.step__n {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  color: var(--red-ink); line-height: 1; display: block; margin-bottom: 12px;
}
.step h3 { margin-bottom: 6px; }

/* --- Flow (dove si inserisce Sadie) ------------------------------------- */
.flow { list-style: none; margin: 0; padding: 0; counter-reset: f; display: grid; gap: 2px; }
.flow li {
  counter-increment: f; position: relative; padding: 16px 18px 16px 56px;
  background: var(--surface); border: 1px solid var(--line); font-size: .96rem; margin: 0;
}
.flow li:first-child { border-radius: var(--r) var(--r) 0 0; }
.flow li:last-child  { border-radius: 0 0 var(--r) var(--r); }
.flow li + li { border-top: 0; }
.flow li::before {
  content: counter(f, decimal-leading-zero);
  position: absolute; left: 18px; top: 16px;
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  color: var(--red-ink); letter-spacing: .06em;
}

/* --- Screenshot prodotto ------------------------------------------------ */
.shot { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--sh); }
.shot img { width: 100%; height: auto; }
.shot__cap { padding: 14px 18px; border-top: 1px solid var(--line-soft); font-size: .88rem; color: var(--muted); background: var(--surface); }
.shot__cap strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; font-family: var(--font-display); }

/* --- Sezione scura: demo line ------------------------------------------- */
.demoline { background: var(--dark-2); border-radius: var(--r-lg); padding: 38px; }
.demoline__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.demoline__num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #fff; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.demoline__lab { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A94A3; margin-bottom: 6px; text-align: right; }
.scenario { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r); padding: 20px; }
.scenario__n { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A94A3; margin-bottom: 10px; }
.scenario__q { font-family: var(--font-display); font-style: italic; color: #fff; font-size: 1rem; margin-bottom: 12px; }
.scenario ul { margin: 0; padding-left: 1.05rem; font-size: .9rem; color: #AEB7C2; }

/* --- Roadmap ------------------------------------------------------------ */
.soon { font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  background: var(--soon-bg); color: var(--soon-ink); padding: 4px 8px; border-radius: 5px; display: inline-block; margin-bottom: 12px; }

/* --- Logos / trust ------------------------------------------------------ */
.trust { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; opacity: .7; }
.trust img { height: 30px; width: auto; }

/* ============================ Form / Pipedrive ==================== */
/* Contenitore neutro: il form Pipedrive porta gia' la sua cornice, quindi
   qui niente bordo ne' padding, altrimenti si vedono due riquadri.
   min-height va tarata sull'altezza reale del form (vedi README).      */
.formwrap {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); overflow: hidden;
}
.formwrap iframe { width: 100%; border: 0; display: block; min-height: 1380px; }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 16px; }
.placeholder-form {
  border: 2px dashed var(--line); border-radius: var(--r); padding: 48px 28px; text-align: center; color: var(--muted);
  background: var(--bg);
}
.placeholder-form code { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; font-size: .85em; color: var(--red-800); }

/* ============================ Thank you =========================== */
.thanks { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 80px 0; background: var(--bg); }
.thanks__box { max-width: 620px; text-align: center; }
.thanks__icon {
  width: 76px; height: 76px; border-radius: 50%; background: var(--green-tint);
  display: grid; place-items: center; margin: 0 auto 26px;
}
.thanks__icon svg { width: 36px; height: 36px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.thanks__box .btn { margin-top: 14px; }

/* ============================ Footer ============================== */
.site-footer { background: var(--dark); color: #98A2B0; font-size: .92rem; padding: 62px 0 30px; }
.site-footer a { color: #C4CCD6; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 46px; }
/* Landing pubblicata da sola: il footer ha tre colonne invece di quattro. */
.footer-grid--3 { grid-template-columns: 1.6fr 1fr 1fr; }
.footer-brand p { margin-top: 18px; max-width: 34ch; color: #8A94A3; font-size: .9rem; }
.footer-col h4 {
  color: #fff; font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-mps { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.footer-mps img { height: 32px; width: auto; opacity: .95; }
.footer-bottom {
  border-top: 1px solid #262E39; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: .85rem; color: #8B95A3;
}
.footer-bottom ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-bottom li { margin: 0; }

/* ============================ Utility ============================= */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--red); color: #fff;
  padding: 10px 18px; z-index: 999; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; border-radius: 3px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack-lg > * + * { margin-top: 26px; }

/* ============================ Responsive ========================== */
/* Il menu desktop (5 voci + lingue + tema + Login + CTA) non ci sta sotto i
   1280px: sotto quella soglia si passa all'hamburger. Soglia tarata sullo
   spagnolo, che e' la lingua con le etichette piu' lunghe.
   Nella barra restano marchio, CTA e hamburger; menu, lingue, tema e Login
   scendono nel pannello a tendina. */
@media (max-width: 1280px) {
  .burger { display: inline-flex; }
  .nav { margin-left: auto; gap: 10px; }
  .lang__code { display: none; }
  .nav__actions .btn--ghost { display: none; }

  .nav__panel { display: none; }
  .site-header.is-open .nav__panel {
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
    position: absolute; left: 0; right: 0; top: var(--header-h);
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px; box-shadow: var(--sh-md);
  }
  .site-header.is-open .nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: static; padding: 0;
  }
  .site-header.is-open .nav__links li { width: 100%; margin: 0; }
  .site-header.is-open .nav__links a {
    display: block; width: 100%; padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .site-header.is-open .nav__actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .site-header.is-open .nav__actions .btn--ghost { display: inline-flex; }
}
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 940px) {
  .grid--form { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .section { padding: 60px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .demoline { padding: 24px; }
  .hero { padding: 52px 0 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================ Print =============================== */
@media print {
  .site-header, .site-footer, .burger { display: none; }
}

/* ============================ Segnaposto ========================== */
/* Valori non ancora confermati: devono saltare all'occhio in revisione
   e sparire con un find & replace prima della pubblicazione.          */
.tbd {
  border-bottom: 1px dashed var(--red-ink);
  color: var(--red-ink);
  font-variant-numeric: tabular-nums;
}
.section--dark .tbd { border-bottom-color: #F0A6A0; color: #F0A6A0; }
.tbd-note {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red-ink); display: inline-block;
}
.section--dark .tbd-note { color: #F0A6A0; }

/* ============================ Selettore tema ====================== */
/* Strumento di revisione: serve a confrontare chiaro e scuro.
   Quando la scelta è fatta, il bottone si può togliere dall'header e
   il tema si fissa con data-theme sul tag <html> (o si lascia, se si
   vuole offrire davvero entrambi ai visitatori). */
.theme-toggle {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--red-ink); border-color: var(--red-tint-2); background: var(--red-tint); }
.theme-toggle svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ============================================================================
   TEMA SCURO — ritmo delle sezioni
   Il nero piatto appiattisce la pagina. Stessa ricetta di tfa.nexera.net:
   grandi bagliori radiali del colore d'accento piu' una griglia sfumata.

   Due accortezze imparate provando: i bagliori vanno messi a meta' altezza
   (non ai bordi, altrimenti a meta' sezione si torna sul piatto) e sotto
   ognuno serve comunque una sfumatura diagonale continua, cosi' il colore
   non e' mai uniforme. L'accento si alterna: blu MPS Monitor e rosso Sadie,
   e cambia anche il lato da cui entra.
   ========================================================================== */
[data-theme="dark"] body { background: var(--bg); }

/* --- Hero: rosso dietro al widget della chiamata, blu in basso a sinistra,
       griglia sfumata ai bordi ---------------------------------------------- */
[data-theme="dark"] .hero {
  background:
    radial-gradient(52rem 30rem at 84% -4rem, var(--glow-red), transparent 62%),
    radial-gradient(44rem 26rem at 2% 105%, var(--glow-blue), transparent 66%),
    radial-gradient(115% 85% at 50% 0%, transparent 38%, var(--bg) 100%),
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(165deg, #131C29 0%, #0D121A 100%);
}

/* --- Sezione base: blu tenue da destra ---------------------------------- */
[data-theme="dark"] .section {
  background:
    radial-gradient(40rem 30rem at 98% 50%, var(--glow-blue-2), transparent 68%),
    linear-gradient(160deg, #131B27 0%, #0D121A 58%, #101724 100%);
}

/* --- Sezione alternata: blu pieno da sinistra --------------------------- */
[data-theme="dark"] .section--alt {
  background:
    radial-gradient(44rem 32rem at 2% 48%, var(--glow-blue), transparent 68%),
    linear-gradient(200deg, #111A28 0%, #0B1017 62%, #0E1522 100%);
}

/* --- Sezione chiara del tema chiaro: qui rossa, da destra --------------- */
[data-theme="dark"] .section--soft {
  background:
    radial-gradient(42rem 30rem at 96% 46%, var(--glow-red-2), transparent 68%),
    linear-gradient(170deg, #0F1620 0%, #090D14 60%, #0D121B 100%);
}

/* --- "Prova Sadie": il momento piu' carico, blu + rosso + griglia ------- */
[data-theme="dark"] .section--dark {
  background:
    radial-gradient(46rem 26rem at 50% 116%, var(--glow-blue), transparent 68%),
    radial-gradient(32rem 20rem at 90% -2rem, var(--glow-red-2), transparent 66%),
    radial-gradient(112% 92% at 50% 50%, transparent 30%, #101825 100%),
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(180deg, #141D2B 0%, #0E1621 100%);
}
[data-theme="dark"] .demoline {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}

/* --- Footer: chiude con una velatura blu, non con un muro nero ---------- */
[data-theme="dark"] .site-footer {
  background:
    radial-gradient(42rem 22rem at 12% 0%, var(--glow-blue-2), transparent 62%),
    linear-gradient(180deg, #121B28 0%, #090D14 100%);
  border-top: 1px solid rgba(255,255,255,.05);
}

/* Le card restano il piano piu' alto: fondo pieno, cosi' staccano sempre
   dai bagliori qualunque sezione le ospiti. */
[data-theme="dark"] .card,
[data-theme="dark"] .uc,
[data-theme="dark"] .shot,
[data-theme="dark"] .callcard,
[data-theme="dark"] .formwrap { background: var(--surface); }

/* Il filetto fra due sezioni chiare non serve piu': separa gia' la sfumatura */
[data-theme="dark"] .section + .section { border-top: 0; }


/* ============================================================================
   Header: spazio orizzontale
   L'header porta molto piu' del contenuto: marchio, 5 voci di menu, tre
   bandierine, selettore tema, Login e CTA. Nei 1160px del contenuto non ci
   sta in nessuna delle tre lingue, e lo spagnolo e' il caso peggiore
   («Qué hace Sadie», «Dentro de Sadie», «Solicita una demo»).

   Due correttivi: il lockup e' impaginato su due righe (blocco da ~177px
   invece di ~280px) e il contenitore dell'header e' un filo piu' largo di
   quello del testo. Sotto i 1280px menu, lingue, tema e Login scendono nel
   pannello a tendina; sotto i 600px anche la tagline resta al solo footer.
   ========================================================================== */
/* Un filo piu' largo del contenuto: basta allo spagnolo senza sfalsare
   visibilmente il marchio rispetto ai titoli. */
.site-header .wrap { max-width: 1300px; }


/* Sul telefono nella barra ci stanno solo marchio, CTA compatta e hamburger:
   la CTA si stringe e la tagline resta al footer. */
@media (max-width: 600px) {
  .site-header .brand__tag { display: none; }
  .nav .btn--primary { padding: 8px 13px; font-size: .82rem; }
}

/* Nel tema scuro la sezione del form eredita il trattamento che era della
   fascia "Prova Sadie": bagliore blu dal basso, rosso dall'alto e griglia.
   Cosi' la pagina ha ancora un momento forte prima del footer. */
[data-theme="dark"] .section--accent {
  background:
    radial-gradient(46rem 28rem at 50% 112%, var(--glow-blue), transparent 68%),
    radial-gradient(32rem 20rem at 92% -2rem, var(--glow-red-2), transparent 66%),
    radial-gradient(112% 92% at 50% 50%, transparent 32%, #101825 100%),
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(180deg, #141D2B 0%, #0E1621 100%);
}