/* ===========================================================================
   ANTEX — sistema visuale
   ---------------------------------------------------------------------------
   FONTE DEL COLORE: Antex_Brand_Guidelines_v2.pptx. Non è una proposta
   grafica: è l'identità ufficiale, con un elenco esplicito di "DON'T" che
   include «non modificare i colori del brand». Quando il brand dice qualcosa,
   comanda il brand.

   PALETTE (slide 3)
     Indigo #6366F1 · Emerald #10B981 · Cyan #06B6D4 · Violet #8B5CF6 · Pink #EC4899
     Fondo scuro #0A0520 · Fondo chiaro #F8F9FC
     Gradiente primario: 135°, Indigo -> Emerald -> Cyan -> Violet -> Pink.

   ---------------------------------------------------------------------------
   TRE DEROGHE CONSAPEVOLI, tutte documentate qui e non sparse nel foglio.

   1. IL CARATTERE È INTER, non Outfit.
      La slide 4 delle guidelines indica Outfit, motivandolo con la «chiarezza
      geometrica che completa la geometria angolare del simbolo A». Inter è una
      scelta esplicita del committente. Non è un ripiego: Inter è disegnata per
      l'interfaccia — altezza delle minuscole più alta a parità di corpo,
      aperture più larghe, numeri tabulari nativi — e su un sito che ha molte
      etichette piccole, tabelle e finestre di dati si legge meglio di una
      grottesca geometrica. Il costo è che il titolo perde un po' del carattere
      del marchio: se un domani si torna indietro, si cambia SOLO --f-sans.

   2. IL GRADIENTE DEL PULSANTE È PIÙ SCURO DI QUELLO DEL BRAND.
      Il gradiente del brand porta testo bianco. Misurato: bianco su #EC4899 sta
      a 3,53:1, cioè sotto la soglia AA per il testo normale. Un pulsante è
      l'elemento che DEVE essere leggibile per definizione, quindi per il solo
      pulsante si usa la versione scurita degli stessi tre colori (--grad-cta),
      che tiene il bianco sopra 4,7:1 su tutta la corsa. Il gradiente del brand
      (--grad) resta intatto dov'è decorazione: simbolo, filetti, superfici.
      Scurire un colore per la leggibilità è peraltro un gesto che il brand fa
      già da sé: lo stato «pressed» del pulsante è un indaco scurito.

   3. NON C'È PIÙ L'ALTERNANZA CHIARO/SCURO FRA LE SEZIONI.
      La versione precedente alternava fondo scuro e fondo carta come ritmo
      della pagina. Con due temi non si può più: in tema chiaro le sezioni
      «scure» diventerebbero macchie nere in mezzo alla pagina, e viceversa.
      Il ritmo adesso lo danno TRE TONI DELLA STESSA POLARITÀ (--bg, --bg-2,
      --bg-3): in scuro tre viola-neri sempre più chiari, in chiaro tre bianchi
      sempre più grigi. Si distinguono, ma nessuna sezione ribalta l'ambiente.

   ---------------------------------------------------------------------------
   ACCESSIBILITÀ — I NUMERI SONO MISURATI, NON STIMATI.
   Accanto a ogni token di testo c'è il rapporto di contrasto sul fondo PIÙ
   SFAVOREVOLE del suo tema (il tono 3, che è il più chiaro dei tre scuri e il
   più scuro dei tre chiari): se regge lì, regge ovunque.
   CAMBIANDO UN COLORE, RIFARE IL CONTO.

   Sulle DIMENSIONI: WCAG non fissa un minimo in pixel — quello che impone è
   che il testo regga lo zoom al 200% (SC 1.4.4) e la spaziatura forzata
   (1.4.12). Il minimo qui è una scelta di leggibilità e non un obbligo
   normativo: nessun testo scende sotto --fs-micro (13,3px), e nessun testo
   da LEGGERE (non etichetta) sotto --fs-small (15px). La versione precedente
   aveva etichette a 0,58rem, cioè 9px.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. FONT — self-hosted
   Niente CDN Google: è un sito europeo e la chiamata a fonts.gstatic.com
   trasferirebbe l'IP del visitatore prima di qualsiasi consenso (par. 22.7).
   I file sono variabili: un solo file copre tutti i pesi della famiglia.
   --------------------------------------------------------------------------- */

/* Inter — titoli, interfaccia e corpo. Pesi 300-800 in un file solo. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  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: "Inter";
  font-style: normal;
  font-weight: 300 800;
  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;
}

/* Outfit — il carattere del brand (slide 4 delle guidelines), qui SOLO per la
   scritta del marchio accanto al simbolo.
   Il testo del sito è Inter per deroga esplicita del committente (vedi in cima
   a questo file), ma il marchio non è testo del sito: è il logo, e sul logo
   comanda il brand. Il lockup ufficiale — simbolo sopra, «Antex» sotto — è
   disegnato in Outfit, e scriverlo in Inter accanto al simbolo estratto dalle
   guidelines significa mettere in pagina due metà dello stesso logo con due
   caratteri diversi.
   I file erano già in assets/fonts/ dal 23/08: erano rimasti lì, senza
   dichiarazione, dal giorno del passaggio a Inter. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/outfit-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: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

/* JetBrains Mono — SOLO endpoint, JSON, MCP, log, etichette tecniche e numeri.
   Il brand non definisce un monospaziato perché non ne ha bisogno; il
   documento di progettazione (par. 10.4) invece lo richiede espressamente.
   È un'aggiunta funzionale, non una seconda voce del brand: fuori da quei
   contesti non si usa. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrainsmono-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrainsmono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

/* ---------------------------------------------------------------------------
   2. TOKEN INDIPENDENTI DAL TEMA
   I cinque colori del brand, le misure, il movimento. Non cambiano fra chiaro
   e scuro: quello che cambia sono i token SEMANTICI del blocco 3.
   --------------------------------------------------------------------------- */
:root {
  /* --- I cinque colori del brand (slide 3). Si usano SEMPRE da qui: un
         esadecimale scritto a mano nel CSS è un colore che nessuno troverà il
         giorno in cui il brand cambia. --- */
  --indigo:  #6366F1;
  --emerald: #10B981;
  --cyan:    #06B6D4;
  --violet:  #8B5CF6;
  --pink:    #EC4899;

  /* --- Fondi dichiarati dal brand: restano i capisaldi dei due temi. --- */
  --void:  #0A0520;   /* Dark  (slide 3) */
  --paper: #F8F9FC;   /* Light (slide 3) */

  /* --- Gradiente primario del brand: 135°, i cinque colori in sequenza.
         È il segno distintivo dell'identità: simbolo, filetti, POCHE
         superfici-firma. Ovunque = niente. Non porta mai testo: per quello
         c'è --grad-cta. --- */
  --grad: linear-gradient(135deg,
      var(--indigo) 0%,
      var(--emerald) 25%,
      var(--cyan) 50%,
      var(--violet) 75%,
      var(--pink) 100%);

  /* --- Il gradiente che PORTA TESTO (pulsante primario, pastiglie).
         Gli stessi tre colori del brand, scuriti quel tanto che serve a
         tenere il bianco sopra 4,5:1 lungo tutta la corsa:
           #FFFFFF su #5B54EE = 5,32   (indaco)
           #FFFFFF su #7C4DEE = 5,06   (viola)
           #FFFFFF su #D12F7D = 4,76   (rosa)
         Con i colori puri del brand l'estremo rosa starebbe a 3,53:1.
         Cinque tappe su un pulsante da 44px diventano fanghiglia: tre si
         leggono. --- */
  --grad-cta: linear-gradient(135deg, #5B54EE 0%, #7C4DEE 55%, #D12F7D 100%);
  --on-cta: #FFFFFF;

  /* --- Raggi: scala corta e ripetuta, non un valore per componente. --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Spazio --- */
  --sec-y:       clamp(84px, 10vw, 140px);
  --sec-y-tight: clamp(52px, 7vw, 92px);
  --shell:       1240px;
  --shell-pad:   clamp(20px, 4vw, 40px);
  /* Contenitore «pieno»: lo usa la hero della home, che non è un blocco di
     testo ma una vetrina, e a 1240px lasciava 340px di vuoto per lato su un
     monitor da 1920. Il tetto a 1920 non è timidezza: senza, su un ultrawide
     le due colonne si allontanerebbero fino a non leggersi più come una
     scena sola. Fino a quella misura il contenuto arriva davvero ai bordi.
     Il respiro laterale è più largo di quello del sito (64 invece di 40):
     a piena larghezza un margine da 40px sembra un errore di calcolo. */
  --shell-wide:     1920px;
  --shell-pad-wide: clamp(20px, 4vw, 64px);

  /* --- Famiglie --- */
  --f-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Il carattere del LOGO, e di nient'altro. Non è una terza voce tipografica
     del sito: è la metà scritta del marchio, e va con il simbolo. Se compare
     su qualcosa che non sia la scritta accanto al simbolo, è un errore. */
  --f-brand:   "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* --- SCALA TIPOGRAFICA — quattro gradini, e un pavimento.
         Il pavimento è --fs-micro: sotto quello non scende niente, nemmeno
         un'etichetta di due parole in maiuscoletto. Con la radice a 106,25%
         (blocco 4) i valori in rem valgono:
           micro 13,3px · small 15,0px · base 17px
         Le etichette tecniche della versione precedente stavano a 9-11px. --- */
  --fs-micro: 0.78rem;
  --fs-small: 0.88rem;
  --fs-base:  1rem;
  --fs-lede:  clamp(1.06rem, 1.15vw, 1.2rem);

  /* --- Movimento: una sola curva, due durate. --- */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.28s;
  --t-slow: 0.7s;

  /* --- Livelli --- */
  --z-grain: 90;
  --z-nav:   100;
  --z-menu:  110;
}

/* ---------------------------------------------------------------------------
   3. I DUE TEMI
   ---------------------------------------------------------------------------
   Tutto il colore della pagina passa da qui. Nessuna regola più in basso
   scrive un colore di fondo o di testo a mano: cambiando questi token cambia
   il sito, in tutti e due i temi insieme.

   TRE BLOCCHI, e servono tutti e tre:
     :root                                  -> scuro, il tema di partenza
     @media (prefers-color-scheme: light)   -> chi ha il sistema in chiaro
                                               e NON ha scelto: passa al chiaro
     [data-theme="light"] / ["dark"]        -> la scelta esplicita, che vince
                                               sempre su tutte e due

   Il selettore del media query è :root:not([data-theme="dark"]): senza quel
   :not, chi ha il sistema in chiaro e sceglie lo scuro dall'interruttore
   otterrebbe una pagina scura con dentro i token chiari, cioè testo bianco su
   bianco. È l'errore classico dei temi a tre stati.
   --------------------------------------------------------------------------- */

/* ===== TEMA SCURO (di partenza) ===== */
:root {
  color-scheme: dark;

  /* I tre toni di fondo. Sono lo stesso viola-nero del brand, schiarito quel
     tanto che basta a distinguere una sezione dall'altra senza introdurre una
     tinta nuova e senza mai ribaltare l'ambiente. */
  --bg:   var(--void);   /* #0A0520 */
  --bg-2: #100A2A;
  --bg-3: #171040;

  /* Superfici: le card e i pannelli che stanno SOPRA il fondo. */
  --surface:       rgba(243, 244, 250, 0.045);
  --surface-solid: #171040;   /* quando serve tinta piena (niente blur) */
  --surface-2:     #201858;
  --surface-3:     #2A2070;

  --line:   rgba(243, 244, 250, 0.11);
  --line-2: rgba(243, 244, 250, 0.20);
  --line-3: rgba(243, 244, 250, 0.34);

  /* Testo — rapporti misurati sul tono 3 (#171040), il fondo più chiaro. */
  --text:   #F3F4FA;   /* 16,2:1 */
  --text-2: #B7BBD6;   /*  9,4:1 — secondario, testo da leggere */
  --text-3: #9296BA;   /*  6,2:1 — etichette e meta */

  /* Accento leggibile: cyan, 7,3:1 sul tono 3. Indigo starebbe a 4,0:1, cioè
     sotto soglia: nel tema scuro resta un colore da superficie, non da testo. */
  --accent-fg:   var(--cyan);
  --accent-soft: rgba(6, 182, 212, 0.13);
  --accent-line: rgba(6, 182, 212, 0.34);

  /* Stati: vivono DENTRO i mockup di prodotto e riusano i colori del brand
     invece di introdurne di nuovi. Mai il solo colore: sempre con etichetta. */
  --verified: var(--emerald);   /* 7,0:1 */
  --caution:  #C4B5FD;          /* viola chiaro: il violet pieno sta a 4,2:1 */
  --absent:   #F9A8D4;          /* rosa chiaro, stessa ragione */

  /* Finestra del codice */
  --code-bg: #070318;
  --code-fg: #C8D2E0;   /* 13,0:1 */
  --tk-str:  #6EE7B7;   /* 11,6:1 */
  --tk-com:  #8E94B2;   /*  5,6:1 — corsivo, ed è un commento */
  --tk-fn:   #A5B4FC;   /*  8,9:1 */
  --tk-num:  #F9A8D4;   /*  9,8:1 */

  /* Vetro (par. 8.5). Tre livelli: cambiano blur, bordo e riflesso insieme,
     non solo l'opacità. */
  /* IL VELO DEL CARTELLO DI AVVIO.
     Non e' un livello di vetro: il vetro lascia leggere quello che c'e'
     sotto, questo deve smettere di farlo leggere. Copre la conversazione
     quanto basta perche' l'occhio si fermi sul pulsante invece di provare a
     leggere la chat spenta dietro — con una tinta piu' trasparente si
     ottiene il peggio dei due, un testo quasi leggibile sopra cui c'e'
     scritto «avvia». Resta un filo di trasparenza perche' si capisca che
     sotto c'e' qualcosa, e che sara' quello a muoversi. */
  --veil: rgba(10, 5, 32, 0.985);

  --g1-bg:   rgba(10, 5, 32, 0.74);
  --g1-blur: 20px;
  --g1-line: rgba(243, 244, 250, 0.11);
  /* La barra di navigazione ha un vetro suo, molto piu' trasparente
     del livello 1: qui il fondo quasi non tinge e il lavoro lo fa la
     sfocatura. E' l'effetto «liquid glass», e vive di quel rapporto
     — tanta sfocatura, poca tinta. */
  --nav-bg:   rgba(10, 5, 32, 0.25);
  --nav-blur: 34px;

  --g2-bg:    rgba(243, 244, 250, 0.05);
  --g2-blur:  14px;
  --g2-line:  rgba(243, 244, 250, 0.12);
  --g2-shine: rgba(243, 244, 250, 0.17);

  --g3-bg:   rgba(23, 16, 64, 0.62);
  --g3-blur: 24px;
  --g3-line: rgba(243, 244, 250, 0.16);

  /* Ambiente: bagliori e grana. In scuro possono spingere, sono luce su nero. */
  --glow-a: rgba(99, 102, 241, 0.20);
  --glow-b: rgba(6, 182, 212, 0.16);
  --grain-op: 0.038;

  --shadow-lift: 0 24px 60px -34px rgba(0, 0, 0, 0.85);
  --shadow-deep: 0 40px 80px -30px rgba(0, 0, 0, 0.85);

  --sel-bg: var(--cyan);
  --sel-fg: #0A0520;

  /* Testo sopra una superficie tinta d'accento (bolla utente, avatar,
     pastiglia selezionata). Sul cyan il testo leggibile è quello scuro:
     #0A0520 su #06B6D4 sta a 8,2:1, mentre il bianco starebbe a 2,1:1.
     In tema chiaro l'accento è l'indaco scurito e vale il contrario — per
     questo è un token e non un colore scritto nel componente. */
  --on-accent: #0A0520;

  /* Footer: nel tema scuro conserva l'aspetto corrente. I token dedicati
     permettono al tema chiaro di ribaltarlo senza colori nei componenti. */
  --footer-bg:            var(--bg);
  --footer-text:          var(--text);
  --footer-text-2:        var(--text-2);
  --footer-text-3:        var(--text-3);
  --footer-line:          var(--line);
  --footer-symbol-filter: none;
  --footer-by-filter:     brightness(1.7);
  --footer-logo-opacity:  0.78;

  /* Superfici di stato: riquadro «esito positivo» e «errore». Vengono
     dall'emerald e dal pink del brand, non da un verde e un rosso qualsiasi.
     Hanno sostituito rgba(95,211,166,..) e rgba(232,138,125,..), che erano
     residui della prima versione ambra del sito. */
  --ok-bg:   rgba(16, 185, 129, 0.12);
  --ok-line: rgba(16, 185, 129, 0.30);
  --ko-bg:   rgba(236, 72, 153, 0.12);
  --ko-line: rgba(236, 72, 153, 0.30);

  /* Evidenziatore del testo nei mockup (<mark>): il viola del brand. */
  --mark-bg: rgba(139, 92, 246, 0.30);
  --mark-fg: var(--text);

  /* Fondi di superfici che devono STACCARE dal contenitore, non fondersi:
     il pannello laterale del simulatore, il mega-menu, il menu mobile.
     In scuro affondano, in chiaro emergono — è la stessa intenzione, che
     cambia direzione con il tema. */
  --inset-bg:  rgba(7, 11, 18, 0.34);
  /* Tinta PIENA: il pannello sta dentro la barra, che ha il suo
     `backdrop-filter`, e un filtro annidato in un altro non campiona la
     pagina. Vedi il commento su `.mega` in antex-ui.css. */
  --mega-bg:   #0C0822;
  --drawer-bg: rgba(7, 4, 22, 0.96);
}

/* ===== TEMA CHIARO ===== */

/* Il chiaro come lo definisce il sistema, per chi non ha scelto. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg:   #FFFFFF;
    --bg-2: var(--paper);   /* #F8F9FC — il chiaro dichiarato dal brand */
    --bg-3: #EEF0F7;

    --surface:       #FFFFFF;
    --surface-solid: #FFFFFF;
    --surface-2:     #F2F4FA;
    --surface-3:     #E7EAF4;

    --line:   #DDE1EC;
    --line-2: #C3C9DC;
    --line-3: #A8AFC8;

    /* Rapporti misurati sul tono 3 (#EEF0F7), il fondo più scuro. */
    --text:   #0B0718;   /* 17,4:1 */
    --text-2: #4C5170;   /*  6,8:1 */
    --text-3: #5D6384;   /*  5,2:1 */

    /* Su fondo chiaro l'accento di testo è l'indaco scurito che il brand
       stesso nomina per lo stato pressed: 5,5:1 sul tono 3. L'indigo puro
       starebbe a 3,4:1 e lì resta una superficie, non un testo. */
    --accent-fg:   #4F46E5;
    --accent-soft: rgba(79, 70, 229, 0.09);
    --accent-line: rgba(79, 70, 229, 0.28);

    --verified: #08704F;   /* 5,4:1 — l'emerald puro starebbe a 2,1:1 */
    --caution:  #6D28D9;   /* 6,2:1 */
    --absent:   #B02463;   /* 5,6:1 */

    --code-bg: #F7F8FC;
    --code-fg: #1A1730;   /* 15,3:1 */
    --tk-str:  #047857;   /*  4,8:1 */
    --tk-com:  #62678A;   /*  4,8:1 */
    --tk-fn:   #4338CA;   /*  6,9:1 */
    --tk-num:  #BE185D;   /*  5,3:1 */

    --veil: rgba(248, 249, 252, 0.985);

    --g1-bg:   rgba(255, 255, 255, 0.80);
    --g1-blur: 20px;
    --g1-line: rgba(11, 7, 24, 0.10);
    --nav-bg:   rgba(255, 255, 255, 0.25);
    --nav-blur: 34px;

    --g2-bg:    rgba(255, 255, 255, 0.74);
    --g2-blur:  14px;
    --g2-line:  rgba(11, 7, 24, 0.10);
    --g2-shine: rgba(255, 255, 255, 0.92);

    --g3-bg:   rgba(255, 255, 255, 0.86);
    --g3-blur: 24px;
    --g3-line: rgba(11, 7, 24, 0.11);

    /* In chiaro i bagliori vanno tenuti bassi: su bianco un alone al 20%
       diventa una macchia sporca, non una sorgente di luce. */
    --glow-a: rgba(99, 102, 241, 0.13);
    --glow-b: rgba(6, 182, 212, 0.10);
    --grain-op: 0.02;

    --shadow-lift: 0 18px 40px -28px rgba(11, 7, 24, 0.35);
    --shadow-deep: 0 30px 60px -30px rgba(11, 7, 24, 0.26);

    --sel-bg: #4F46E5;
    --sel-fg: #FFFFFF;

    --on-accent: #FFFFFF;   /* #FFFFFF su #4F46E5 = 6,3:1 */

    --footer-bg:            var(--accent-fg);
    --footer-text:          var(--on-accent);
    --footer-text-2:        var(--on-accent);
    --footer-text-3:        var(--on-accent);
    --footer-line:          rgba(255, 255, 255, 0.24);
    --footer-symbol-filter: brightness(0) invert(1);
    --footer-by-filter:     brightness(0) invert(1);
    --footer-logo-opacity:  1;

    --ok-bg:   rgba(8, 112, 79, 0.09);
    --ok-line: rgba(8, 112, 79, 0.26);
    --ko-bg:   rgba(176, 36, 99, 0.08);
    --ko-line: rgba(176, 36, 99, 0.24);

    --mark-bg: #EDE4FD;
    --mark-fg: #2E1065;

    --inset-bg:  #F2F4FA;
    --mega-bg:   #FFFFFF;
    --drawer-bg: rgba(248, 249, 252, 0.98);
  }
}

/* La scelta esplicita dell'interruttore. Stessi valori del blocco qui sopra:
   duplicati, non ereditati, perché un @media non si può «attivare» da un
   attributo. È l'unico punto del foglio in cui una lista di token è ripetuta,
   ed è la ragione per cui i due elenchi vanno tenuti allineati a mano.
   Toccandone uno, toccare anche l'altro. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:   #FFFFFF;
  --bg-2: var(--paper);
  --bg-3: #EEF0F7;

  --surface:       #FFFFFF;
  --surface-solid: #FFFFFF;
  --surface-2:     #F2F4FA;
  --surface-3:     #E7EAF4;

  --line:   #DDE1EC;
  --line-2: #C3C9DC;
  --line-3: #A8AFC8;

  --text:   #0B0718;
  --text-2: #4C5170;
  --text-3: #5D6384;

  --accent-fg:   #4F46E5;
  --accent-soft: rgba(79, 70, 229, 0.09);
  --accent-line: rgba(79, 70, 229, 0.28);

  --verified: #08704F;
  --caution:  #6D28D9;
  --absent:   #B02463;

  --code-bg: #F7F8FC;
  --code-fg: #1A1730;
  --tk-str:  #047857;
  --tk-com:  #62678A;
  --tk-fn:   #4338CA;
  --tk-num:  #BE185D;

  --veil: rgba(248, 249, 252, 0.985);

  --g1-bg:   rgba(255, 255, 255, 0.80);
  --g1-line: rgba(11, 7, 24, 0.10);
  --nav-bg:   rgba(255, 255, 255, 0.25);
  --nav-blur: 34px;

  --g2-bg:    rgba(255, 255, 255, 0.74);
  --g2-line:  rgba(11, 7, 24, 0.10);
  --g2-shine: rgba(255, 255, 255, 0.92);

  --g3-bg:   rgba(255, 255, 255, 0.86);
  --g3-line: rgba(11, 7, 24, 0.11);

  --glow-a: rgba(99, 102, 241, 0.13);
  --glow-b: rgba(6, 182, 212, 0.10);
  --grain-op: 0.02;

  --shadow-lift: 0 18px 40px -28px rgba(11, 7, 24, 0.35);
  --shadow-deep: 0 30px 60px -30px rgba(11, 7, 24, 0.26);

  --sel-bg: #4F46E5;
  --sel-fg: #FFFFFF;

  --on-accent: #FFFFFF;

  --footer-bg:            var(--accent-fg);
  --footer-text:          var(--on-accent);
  --footer-text-2:        var(--on-accent);
  --footer-text-3:        var(--on-accent);
  --footer-line:          rgba(255, 255, 255, 0.24);
  --footer-symbol-filter: brightness(0) invert(1);
  --footer-by-filter:     brightness(0) invert(1);
  --footer-logo-opacity:  1;

  --ok-bg:   rgba(8, 112, 79, 0.09);
  --ok-line: rgba(8, 112, 79, 0.26);
  --ko-bg:   rgba(176, 36, 99, 0.08);
  --ko-line: rgba(176, 36, 99, 0.24);

  --mark-bg: #EDE4FD;
  --mark-fg: #2E1065;

  --inset-bg:  #F2F4FA;
  --mega-bg:   #FFFFFF;
  --drawer-bg: rgba(248, 249, 252, 0.98);
}

/* ---------------------------------------------------------------------------
   4. BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* 106,25% di quello che l'utente ha impostato nel browser: 17px se il
     default è 16, 21px se l'ha alzato a 20. La percentuale è la ragione per
     cui questo NON toglie a nessuno la propria impostazione — un valore in px
     qui l'avrebbe cancellata. Tutto il resto del foglio è in rem, quindi si
     alza in blocco da questa riga sola. */
  font-size: 106.25%;
  scroll-behavior: smooth;
  /* La nav sticky non deve coprire il titolo raggiunto via ancora. */
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Gli elementi traslati delle sezioni non devono generare barra orizzontale. */
  overflow-x: hidden;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Azzeramento del pulsante.
   Senza `background` e `border` espliciti il browser applica il proprio stile
   di sistema: su Chrome è un rettangolo grigio chiaro con bordo, e ogni voce
   di menu costruita come <button> compare come un tasto grigio. Va azzerato
   QUI e non componente per componente, perché il difetto si ripresenta ogni
   volta che si aggiunge un pulsante nuovo. */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Focus visibile OVUNQUE (par. 22.3). Non si cancella l'outline: si disegna.
   Con i token semantici basta una regola sola: l'accento è già quello giusto
   per il tema corrente. */
:focus-visible {
  outline: 2px solid var(--accent-fg);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--sel-bg); color: var(--sel-fg); }

.skip {
  position: absolute; left: 16px; top: -120px;
  z-index: 200; padding: 12px 20px;
  background: var(--accent-fg); color: var(--sel-fg);
  border-radius: var(--r-sm); font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: 16px; }

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

/* Grana: rompe la piattezza del CSS puro senza disegnare nulla.
   `fixed` e non `absolute`: su un elemento che scorre si ridipinge ogni frame.
   In tema chiaro l'opacità scende quasi a zero — su bianco la stessa grana
   sembra sporco sullo schermo, non materia. */
.grain {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   5. TIPOGRAFIA
   Scala fluida con clamp(): nessun breakpoint tipografico da mantenere.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}

/* Il titolo della hero.
   La misura non è «il più grande possibile»: è il più grande che sta in TRE
   righe nella colonna di sinistra dello split. Inter ha l'occhio più grande
   di Outfit a parità di corpo, quindi lo stesso testo occupa più larghezza:
   il tetto è sceso da 2,9rem a 2,8rem e la misura da 24 a 22 caratteri.
   Cambiando il titolo, ricontrollare il numero di righe a 1440px. */
.h-hero {
  font-size: clamp(2.05rem, 2.9vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.h-1 { font-size: clamp(1.92rem, 3.9vw, 3rem);   letter-spacing: -0.028em; max-width: 20ch; }
.h-2 { font-size: clamp(1.55rem, 2.7vw, 2.2rem); letter-spacing: -0.024em; max-width: 24ch; }
.h-3 { font-size: clamp(1.16rem, 1.5vw, 1.34rem); letter-spacing: -0.018em; line-height: 1.28; }

/* L'accento tipografico: UNA porzione di titolo per sezione. */
.hl { color: var(--accent-fg); }

/* Occhiello: mono, maiuscolo, spaziato. Tracking positivo solo qui, sotto i
   20px, con un valore unico per tutto il sistema. Era a 0,72rem (11,5px):
   adesso sta sul pavimento della scala. */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent-fg);
  flex: none;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.68;
  color: var(--text-2);
  max-width: 58ch;
  margin: 22px 0 0;
}

p { margin: 0 0 1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Etichetta tecnica ricorrente: mono, maiuscoletto, sul pavimento della scala.
   Esisteva già una decina di volte scritta a mano con corpi diversi fra 0,58
   e 0,64rem — cioè fra 9 e 10px. Qui è UNA regola, e chi la usa non può più
   scegliersi un corpo per conto suo. */
.tlabel {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------------------------------------------------------------------------
   6. LAYOUT E TONI DI SEZIONE
   --------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--shell-pad);
}
.shell--narrow { max-width: 900px; }
/* Piena larghezza fino a --shell-wide. Sotto i ~1000px coincide con .shell
   (il tetto non morde più e i due `clamp` danno lo stesso valore): il
   comportamento su telefono e tablet resta identico. */
.shell--wide {
  max-width: var(--shell-wide);
  padding-inline: var(--shell-pad-wide);
}

.sec {
  position: relative;
  padding-block: var(--sec-y);
}
.sec--tight { padding-block: var(--sec-y-tight); }

/* Sezione con un bagliore dentro.
   I bagliori sono posizionati in assoluto e sbordano di proposito oltre il
   bordo della sezione (`right: -160px`): senza ritaglio allargano il documento
   e su schermo stretto compare la barra orizzontale. `body { overflow-x }` lo
   nasconderebbe, ma è un cerotto: meglio ritagliare dove il problema nasce. */
.sec--glow { overflow: hidden; }

/* I TRE TONI.
   Hanno preso il posto di .sec--void / .sec--slate / .sec--paper, che
   nominavano un COLORE e quindi non potevano sopravvivere a un secondo tema:
   una sezione «paper» in tema scuro sarebbe stata una lastra bianca in mezzo
   al nero. Qui il nome dice la POSIZIONE nella scala, non la tinta, e la
   tinta la decide il tema.
   Il tono non va scelto a caso: due sezioni consecutive non devono avere lo
   stesso, altrimenti si leggono come una sola sezione lunga. */
.sec--t1 { background: var(--bg); }
.sec--t2 { background: var(--bg-2); }
.sec--t3 { background: var(--bg-3); }

/* Il passaggio fra due toni è un salto piccolo (di proposito): un filetto
   sottile lo rende un confine invece che una sfumatura incerta. Si disegna
   solo quando il tono cambia davvero, quindi sta sulla sezione e non fra le
   sezioni. */
.sec--t2, .sec--t3 { border-top: 1px solid var(--line); }

.sec-head { margin-bottom: clamp(44px, 5vw, 68px); max-width: 780px; }
/* Due modificatori, non uno: `--center` è centrato sul largo e torna a
   sinistra sul telefono (media query in antex-ui.css), perché un paragrafo
   centrato su colonna stretta si legge peggio; `--center-all` resta centrato
   ovunque, e serve dove anche il contenuto sotto è centrato. */
.sec-head--center,
.sec-head--center-all { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow,
.sec-head--center-all .eyebrow { justify-content: center; }
.sec-head--center :where(h1, h2, h3, h4, p, ul, ol),
.sec-head--center-all :where(h1, h2, h3, h4, p, ul, ol) { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   CENTRARE IL TESTO NON CENTRA LA SCATOLA
   ---------------------------------------------------------------------------
   `text-align: center` centra le righe DENTRO il blocco. Ma qui quasi ogni
   blocco di testo ha un tetto di misura — `.h-1` a 20ch, `.h-2` a 24ch,
   `.lede` a 58ch, OGNI <p> a 68ch (riga qui sopra) — e un blocco più stretto
   del suo contenitore resta ancorato a sinistra. Il risultato: il testo è
   centrato rispetto a se stesso e fuori asse rispetto a tutto il resto,
   occhiello, pulsanti e colonne comprese.

   Non è un difetto teorico: nella CTA finale, a 1440px, il titolo cadeva
   64px a sinistra del paragrafo e dei pulsanti che stavano sotto. Si vede di
   più quanto più il titolo è corto, perché il tetto in `ch` è fisso mentre
   il testo che ci sta dentro no.

   Regola: dove si centra il testo si centra anche la scatola. `.tcenter` fa
   le due cose insieme, così non si può più fare solo metà del lavoro — ed
   è il motivo per cui non si scrive `text-align:center` a mano in un
   attributo `style`.
   `:where()` tiene la specificità a zero: un componente che voglia allineare
   diversamente un suo figlio continua a vincere senza dover alzare la voce.
   --------------------------------------------------------------------------- */
/* ===========================================================================
   LE NOTE LUNGHE NON SI CENTRANO
   ---------------------------------------------------------------------------
   Centrare va bene per un titolo, un occhiello, un sottotitolo: sono una o
   due righe e l'asse centrale si legge a colpo d'occhio. Un paragrafo di
   cinque righe centrato invece ha CINQUE inizi di riga diversi, e l'occhio
   deve cercare ogni volta dove ricomincia: si legge peggio di quanto sembri
   guardandolo, perche' a schermo l'effetto e' ordinato e in lettura no.

   Queste note diventano quindi blocchi giustificati larghi quanto il
   contenitore: margine sinistro e destro fermi, come in un documento.

   `hyphens: auto` NON e' un di piu': senza sillabazione, giustificare
   l'italiano — che ha parole lunghe — apre i famosi «fiumi» di spazio bianco
   fra le colonne. Funziona perche' il documento dichiara `lang="it"`: senza
   quello il browser non sa quali regole applicare e non sillaba affatto.

   Sotto i 640px si torna allineati a sinistra. Su una colonna da 40 caratteri
   la giustificazione non ha spazio per distribuire e i buchi si vedono tutti.
   =========================================================================== */
.longnote {
  max-width: none;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.tcenter { text-align: center; }
.tcenter :where(h1, h2, h3, h4, p, ul, ol, dl) { margin-inline: auto; }
.tcenter :where(.eyebrow) { justify-content: center; }
.tcenter :where(.btn-row) { justify-content: center; }

/* Bagliore ambientale: una sorgente di luce che non esiste come elemento.
   Le due varianti sono i due poli del gradiente del brand — indaco e cyan —
   e la loro intensità è un token, perché in tema chiaro vanno tenute basse. */
.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
}
.glow--brand  { background: radial-gradient(circle, var(--glow-a) 0%, transparent 70%); }
.glow--signal { background: radial-gradient(circle, var(--glow-b) 0%, transparent 70%); }
.glow--cool   { background: radial-gradient(circle, var(--glow-a) 0%, transparent 70%); }

/* ---------------------------------------------------------------------------
   7. VETRO — i tre livelli del par. 8.5
   Niente vetro su blocchi lunghi di testo, tabelle dense, footer, moduli
   (par. 8.3): sotto stanno solo i componenti previsti.
   --------------------------------------------------------------------------- */

/* Glass 1 — navigazione. Leggibilità massima, trasparenza contenuta. */
.g1 {
  background: var(--g1-bg);
  -webkit-backdrop-filter: blur(var(--g1-blur)) saturate(150%);
  backdrop-filter: blur(var(--g1-blur)) saturate(150%);
  border: 1px solid var(--g1-line);
}

/* Glass 2 — card di interfaccia, con riflesso superiore. */
.g2 {
  position: relative;
  background: var(--g2-bg);
  -webkit-backdrop-filter: blur(var(--g2-blur)) saturate(130%);
  backdrop-filter: blur(var(--g2-blur)) saturate(130%);
  border: 1px solid var(--g2-line);
  border-radius: var(--r-lg);
}
/* Il riflesso: una riga di luce sul bordo alto. È il dettaglio che distingue
   il vetro dal rettangolo semitrasparente. */
.g2::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--g2-shine), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Glass 3 — oggetto della hero. Un solo elemento per pagina lo usa. */
.g3 {
  position: relative;
  background: var(--g3-bg);
  -webkit-backdrop-filter: blur(var(--g3-blur)) saturate(140%);
  backdrop-filter: blur(var(--g3-blur)) saturate(140%);
  border: 1px solid var(--g3-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-deep);
}

/* Ripiego senza backdrop-filter: si perde la sfocatura, non la leggibilità
   (par. 8.6) — il fondo diventa opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g1 { background: var(--bg); }
  .g2, .g3 { background: var(--surface-solid); }
}

/* ---------------------------------------------------------------------------
   8. PULSANTI
   Un solo pulsante pieno per schermata: l'azione primaria è "Richiedi una
   demo" (par. 20.1). Tutto il resto è ghost o testuale.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;              /* target touch >= 44px */
  padding: 13px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--f-sans);
  font-size: 0.96rem;            /* 16,3px */
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(0) scale(0.985); }
/* `flex: none` sull'icona: senza, in un pulsante stretto il flex la comprime
   e l'icona esce ovalizzata invece di far andare a capo il testo. */
.btn svg { width: 16px; height: 16px; flex: none; }

/* Azione primaria: il gradiente del brand nella versione che regge il testo
   bianco (vedi --grad-cta in cima). `background-size` più largo dello sfondo
   + spostamento all'hover: il gradiente scorre invece di accendersi, che è il
   modo più economico di dare vita al colore senza animare nulla di costoso. */
.btn--primary {
  background: var(--grad-cta);
  background-size: 180% 100%;
  background-position: 0% 50%;
  /* Queste due righe tolgono il filo rosso che correva sul bordo.
     `background-size: 180%` fa un'immagine piu' larga del pulsante; il
     fondo per difetto si MISURA sulla scatola interna ma si DIPINGE
     fino al bordo esterno, e siccome per difetto si RIPETE, l'anello di
     1px del bordo mostrava la coda della piastrella precedente — cioe'
     l'ultimo colore del gradiente, il cremisi. Misurato: (191,78,150)
     sul bordo contro (97,85,236) all'interno.
     `border-box` allinea la misura alla superficie dipinta, `no-repeat`
     toglie la piastrella di fianco. Lo scorrimento all'hover resta. */
  background-origin: border-box;
  background-repeat: no-repeat;
  color: var(--on-cta);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(91, 84, 238, 0.38);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background-position var(--t-slow) var(--ease);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 8px 28px rgba(91, 84, 238, 0.52);
}
/* Lo stato premuto del brand: indaco scurito e scala 0,96. */
.btn--primary:active {
  transform: scale(0.96);
  box-shadow: 0 2px 10px rgba(91, 84, 238, 0.35);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  border-color: var(--line-3);
  background: var(--surface);
  transform: translateY(-2px);
}

/* Link-azione: la CTA che non merita un pulsante. */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--accent-fg);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: gap var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-text svg { width: 15px; height: 15px; flex: none; }
.btn-text:hover { gap: 13px; border-bottom-color: var(--accent-line); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 34px; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }