/* ============================================================
   Dotsy — landing page
   Font Satoshi: solo i tagli effettivamente usati dal sito
   (Regular, Medium, Bold, Black, Variable — nessun corsivo).
   I woff2 stanno in sito/fonts/, path relativo a questo file.
   ============================================================ */
@font-face{
  font-family: 'Satoshi-Regular';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../fonts/Satoshi-Regular.woff') format('woff'),
       url('../fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Satoshi-Medium';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
       url('../fonts/Satoshi-Medium.woff') format('woff'),
       url('../fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Satoshi-Bold';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
       url('../fonts/Satoshi-Bold.woff') format('woff'),
       url('../fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Satoshi-Black';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
       url('../fonts/Satoshi-Black.woff') format('woff'),
       url('../fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Satoshi-Variable';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../fonts/Satoshi-Variable.woff') format('woff'),
       url('../fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900; font-style: normal; font-display: swap;
}

/* ----------------------------- Token: tema chiaro ----------------------------- */
:root{
  --ink: #3c4043;            /* inchiostro base: testo, linee, pallini, scritta */
  --ink-soft: #6b7075;       /* testo secondario */
  --ink-faint: #e4e7ea;      /* bordi tenui */
  --bg: #f6f7f9;             /* sfondo pagina */
  --brand-bg: #fbfbfc;       /* sfondo colonna animazione */
  --card-bg: #ffffff;        /* sfondo card */
  --accent: #455DE9;         /* accento di sezione, aggiornato via JS (indaco, desaturato 20%) */
  --focus-ring: #1a1c1f;     /* indicatore di focus: colore fisso ad alto contrasto (WCAG 2.4.11) */
  --radius: 24px;            /* stondatura coerente con anelli/pallini del logo */
  --radius-lg: 32px;
  --shadow: 0 18px 50px -28px rgba(60,64,67,.45);
  --shadow-soft: 0 8px 24px -16px rgba(60,64,67,.35);
  --maxw-text: 56ch;
  /* geometria dell'header: da qui dipendono sia la barra sia l'allineamento verticale
     del titolo del sito, che deve restare centrato sui bottoni a ogni dimensione */
  --header-pad-y: clamp(.684rem, 1.71vw, 1.026rem);
  --header-btn: 48px;        /* lato dei controlli tondi; 40px sotto i 1024px */
  --header-h: calc(2 * var(--header-pad-y) + var(--header-btn));
  /* Tetto all'altezza del logo animato. Serve perché le due misure in gioco divergono:
     l'altezza naturale dell'SVG dipende dalla LARGHEZZA della colonna (rapporto 1.1233),
     lo spazio disponibile dall'ALTEZZA della banda. Senza tetto la banda sfora — rotta su
     tablet e su schermi bassi. Il termine sottratto è il resto della banda: titolo, slogan,
     gap e padding. Il max() non è cosmetico: senza floor, su finestre bassissime la
     sottrazione va sotto zero, il max-height si azzera e il logo sparisce. */
  --logo-max-h: max(120px, 100vh - 14rem);   /* banda desktop = 100vh; sotto i 1024px = 60vh */
  /* Spaziatura del wordmark "DOTSY": unica per il titolo del sito e per gli header
     (home e pagine documento), così scrollando la scritta non cambia aspetto.
     Vale 1rem da 360px in su. Sotto, la scritta a 1rem più i tre controlli non
     entrerebbero nella barra (misurato sulle metriche di Satoshi: 3.15em di glifi),
     quindi scende linearmente: 1rem a 360px, ~0.7rem a 320px. */
  --wordmark-ls: clamp(.7rem, 12.5vw - 29px, 1rem);
  color-scheme: light;
}

/* ----------------------------- Token: tema scuro ----------------------------- */
:root[data-theme="dark"]{
  --ink: #e7e9ec;
  --ink-soft: #a6abb0;
  --ink-faint: #34373c;
  --bg: #161719;
  --brand-bg: #1c1e21;
  --card-bg: #212327;
  --focus-ring: #ffffff;     /* su fondo scuro il focus resta sempre ben visibile */
  --shadow: 0 22px 55px -28px rgba(0,0,0,.75);
  --shadow-soft: 0 10px 26px -16px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* Stessi token, applicati dal solo tema di sistema: servono quando il JS è disattivato
   (lo script no-flash in <head> non gira e `data-theme` non viene mai impostato).
   `:not([data-theme="light"])` fa sì che un override manuale a chiaro continui a vincere.
   NB: duplicato voluto del blocco sopra — se cambi un colore, cambialo in entrambi. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink: #e7e9ec;
    --ink-soft: #a6abb0;
    --ink-faint: #34373c;
    --bg: #161719;
    --brand-bg: #1c1e21;
    --card-bg: #212327;
    --focus-ring: #ffffff;
    --shadow: 0 22px 55px -28px rgba(0,0,0,.75);
    --shadow-soft: 0 10px 26px -16px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;   /* mobile: aggancio morbido; desktop: mandatory (vedi media) */
  scroll-padding-top: 8vh;
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Satoshi-Variable','Satoshi-Regular', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}

/* ----------------------------- Accessibilità: skip-link + focus ----------------------------- */
.skip-link{
  position: absolute; left: .75rem; top: -3rem; z-index: 100;
  /* inchiostro su sfondo pagina: contrasto >10:1 in entrambi i temi (no testo bianco su accento chiaro) */
  background: var(--ink); color: var(--bg); text-decoration: none;
  padding: .7rem 1.1rem; border-radius: 12px;
  font-family: 'Satoshi-Bold', sans-serif; font-weight: 700;
  transition: top .2s ease;
}
.skip-link:focus{ top: .75rem; }

/* testo visibile solo agli screen reader (annunci/etichette non visive) */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:focus-visible{
  /* colore fisso ad alto contrasto, indipendente dall'accento di sezione (WCAG 2.4.11/1.4.11) */
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ----------------------------- Header + toggle tema ----------------------------- */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: .6rem;
  /* verticale -14.5% cumulativo (top/bottom: -10% poi -5%), orizzontale invariato */
  padding: var(--header-pad-y) clamp(.8rem, 2vw, 1.2rem);
  border-bottom: 1px solid transparent;   /* diventa visibile da scrollato (mobile) */
  pointer-events: none;                    /* barra trasparente: non blocca i click sotto */
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease,
              padding .25s ease;            /* da scrollato la barra si compatta (mobile) */
}
.site-header > *{ pointer-events: auto; }
/* i controlli non devono mai deformarsi per far spazio al wordmark: restano cerchi */
.site-header > *,
.doc-header-inner > *{ flex-shrink: 0; }
/* aspetto del wordmark nell'header: condiviso tra home (mobile) e pagine documento.
   Dimensione e spaziatura sono quelle di .brand-name da mobile: scrollando, il titolo
   passa dalla banda all'header senza cambiare aspetto. Da 1024px .doc-home allarga la
   spaziatura come fa .brand-name; .header-brand lì non è mai visibile. */
.header-brand,
.doc-home{
  font-family: 'Satoshi-Regular', sans-serif; color: var(--ink);
  text-transform: uppercase; letter-spacing: var(--wordmark-ls);
  font-size: clamp(1.3rem, 4.17vw, 2.92rem);   /* = .brand-name da mobile */
}
/* titolo del sito nell'header: nascosto, compare fisso quando si scrolla giù (mobile) */
.header-brand{
  margin-right: auto;   /* spinge i controlli a destra */
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
/* Bottone contatto email: stessa "pillola" tonda degli altri controlli header.
   width/height sono in transizione perché da scrollato i controlli rimpiccioliscono con la barra. */
.contact-ctrl{
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--header-btn); height: var(--header-btn); padding: 0; cursor: pointer; text-decoration: none;
  border-radius: 9999px; border: 1px solid var(--ink-faint);
  background: var(--card-bg); color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
  transition: background-color .25s ease, color .25s ease, border-color .3s ease,
              width .25s ease, height .25s ease;
}
.contact-ctrl:hover{ color: var(--ink); }
.contact-ctrl .icon{ width: 20px; height: 20px; fill: currentColor; display: block; }

/* Controllo pausa/play dell'animazione: stessa "pillola" del toggle tema */
.anim-ctrl{
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--header-btn); height: var(--header-btn); padding: 0; cursor: pointer;
  border-radius: 9999px; border: 1px solid var(--ink-faint);
  background: var(--card-bg); color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
  transition: background-color .25s ease, color .25s ease, border-color .3s ease,
              width .25s ease, height .25s ease;
}
.anim-ctrl[hidden]{ display: none; }
.anim-ctrl:hover{ color: var(--ink); }
.anim-ctrl .icon{ width: 20px; height: 20px; fill: currentColor; display: block; }
.anim-ctrl .icon-play{ display: none; }
.anim-ctrl[aria-pressed="true"] .icon-pause{ display: none; }
.anim-ctrl[aria-pressed="true"] .icon-play{ display: block; }
/* Toggle tema: singolo bottone "pillola" tonda (coerente con il controllo pausa) */
.theme-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--header-btn); height: var(--header-btn); padding: 0; cursor: pointer;
  border-radius: 9999px; border: 1px solid var(--ink-faint);
  background: var(--card-bg); color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
  transition: background-color .25s ease, color .25s ease, border-color .3s ease,
              width .25s ease, height .25s ease;
}
.theme-toggle:hover{ color: var(--ink); }
.theme-toggle .icon{ width: 20px; height: 20px; fill: currentColor; display: block; }
/* icona = AZIONE: in tema chiaro mostra la luna (vai a scuro), in scuro mostra il sole (vai a chiaro) */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon{ display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display: block; }
:root[data-theme="dark"]  .theme-toggle .icon-sun{ display: block; }

/* ----------------------------- Layout ----------------------------- */
.stage{ position: relative; }

/* Colonna sinistra: nome + animazione + slogan. Su mobile è una banda statica in alto. */
.brand{
  background: linear-gradient(180deg, var(--brand-bg) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--ink-faint);
}
.brand-inner{
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  /* niente padding in alto: ci pensa il titolo, che occupa esattamente l'altezza dell'header */
  gap: 1.4rem; padding: 0 1.25rem clamp(1.4rem, 3.5vw, 2.1rem); min-height: 70vh; text-align: left;
}
.brand-name{
  margin: 0; font-family: 'Satoshi-Regular', sans-serif; font-weight: 400;
  font-size: clamp(1.59rem, 3.97vw, 2.78rem); color: var(--ink);   /* +5% */
  /* il titolo occupa esattamente l'altezza dell'header fisso e il testo si centra nella
     riga: così il suo centro coincide con quello dei bottoni, qualunque sia il font-size */
  line-height: var(--header-h);
  /* maiuscolo, molto spaziato (eco del logo). Valore assoluto: non scala col font-size.
     Questo è il taglio mobile; da 1024px sale a 2.5rem (vedi blocco desktop). */
  text-transform: uppercase; letter-spacing: var(--wordmark-ls);
}
/* Nessun nudge verticale: alla centratura pensa il viewBox dell'SVG (vedi index.html, minY -23.68) */
.logo-wrap{
  width: 100%; align-self: center; display: flex; align-items: center; justify-content: center;
}
.brand-slogan{
  margin: 0; font-family: 'Satoshi-Bold', sans-serif; font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.7rem); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink);
}

/* Colonna destra: scroll verticale delle card */
.content{
  display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.1rem, 5vw, 3rem) 3rem;
  max-width: 760px; margin: 0 auto;
}

/* --------------- Desktop: 2 colonne, sinistra fissa --------------- */
@media (min-width: 1024px){
  html{ scroll-snap-type: none; }   /* lo snap passa al contenitore destro */
  .stage{
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    align-items: start;
    height: 100vh; overflow: hidden;   /* la pagina non scrolla: scrolla solo la colonna destra */
  }
  .brand{
    position: sticky; top: 0; height: 100vh;
    border-bottom: none; border-right: 1px solid var(--ink-faint);
  }
  .brand-inner{ min-height: 100vh; padding: 0 1.5rem clamp(1.75rem, 2.8vw, 1.75rem); }
  .brand-name{ letter-spacing: 2.5rem; }
  /* colonna destra: area card scrollabile + footer fisso in fondo */
  .col-right{ height: 100vh; display: flex; flex-direction: column; min-height: 0; }
  .content{
    margin: 0; max-width: none;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;   /* SCROLL solo qui */
    scroll-snap-type: y mandatory; scroll-padding-top: 8vh;   /* scatto card-per-card */
    /* sinistra invariata (stessa distanza dal centro), destra ridotta -> card più larghe verso destra */
    padding: 18vh clamp(1rem, 2.5vw, 2rem) 18vh clamp(2rem, 5vw, 4.5rem);
    gap: clamp(2rem, 6vh, 4rem);
  }
  .col-right .site-footer{
    flex: 0 0 auto;   /* fisso in fondo alla colonna destra */
    padding-left: clamp(2rem, 5vw, 4.5rem);   /* = padding sinistro delle card */
    /* destra = padding destro delle card + scrollbar di .content -> bordo destro allineato */
    padding-right: calc(clamp(1rem, 2.5vw, 2rem) + var(--sbw, 0px));
  }
  /* sinistra: invariata; destra: allineata al bordo destro delle card (+ scrollbar di .content) */
  .site-header{ padding-left: 1.5rem; padding-right: calc(clamp(1rem, 2.5vw, 2rem) + var(--sbw, 0px)); }
}

/* NB: il blocco "@media (max-width: 1023.98px)" è in FONDO al file:
   deve venire DOPO le regole base .card/.card-* per poterle sovrascrivere. */

/* ----------------------------- Card ----------------------------- */
.card{
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-soft);
  scroll-snap-align: start;        /* lo scroll "scatta" alla card */
  scroll-snap-stop: always;
  scroll-margin-top: 8vh;
  transition: background .35s ease, box-shadow .35s ease;
}
.card.is-active{ box-shadow: var(--shadow); }
/* hover-gradient su tutte le card (la sfumatura accento, prima solo sulla CTA) */
.card:hover{
  background: linear-gradient(180deg, var(--card-bg) 0%, color-mix(in srgb, var(--accent) 8%, var(--card-bg)) 100%);
}

.card-eyebrow{
  display: flex; align-items: center; gap: .5rem;   /* va a capo sotto l'icona */
  margin: 1rem 0 0;
  font-family: 'Satoshi-Medium', sans-serif; font-weight: 500;
  font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;   /* +10% sul precedente */
  color: var(--ink-soft);
}
.card-eyebrow + .card-title{ margin-top: .3rem; }   /* avvicina il titolo all'eyebrow */
/* il "dot" di sezione (hero): anello che si riempie dell'accento (eco del logo) */
.ring{
  width: 13px; height: 13px; border-radius: 50%;
  border: 2.6px solid var(--ink-soft); background: transparent;
  transition: background-color .4s ease, border-color .4s ease;
}
.card.is-active .ring{ background: var(--accent); border-color: var(--accent); }

/* icona Material (SVG inline): in alto a sinistra, nel flusso (al posto del numero) */
.card-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 9999px;
  border: 2px solid var(--ink-faint); color: var(--ink-soft);
  transition: color .4s ease, border-color .4s ease, background-color .4s ease;
}
.card-icon svg{ width: 1.55rem; height: 1.55rem; fill: currentColor; display: block; }
.card.is-active .card-icon{ color: #fff; background: var(--accent); border-color: var(--accent); }

.card-title{
  font-family: 'Satoshi-Black', sans-serif; font-weight: 900;
  line-height: 1.1; letter-spacing: -0.015em;
  margin: .9rem 0 .6rem;
  font-size: clamp(1.66rem, 4.62vw, 2.37rem);   /* +5% sul precedente */
}
.card--hero .card-title{ font-size: clamp(3rem, 11vw, 5.5rem); margin: .4rem 0; }

.card-lead{
  font-family: 'Satoshi-Medium', sans-serif; font-weight: 500;
  font-size: clamp(1.32rem, 3.3vw, 1.65rem); color: var(--ink);   /* +10% sul precedente */
  max-width: var(--maxw-text); margin: .3rem 0 0;
}
.card-text{ color: var(--ink-soft); max-width: var(--maxw-text); margin: .6rem 0 0; font-size: 1.3rem; }

.card-list{ list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .85rem; }
.card-list li{
  position: relative; padding-left: 1.6rem; color: var(--ink-soft);
  max-width: var(--maxw-text); font-size: 1.27rem;   /* +10% sul precedente */
}
.card-list li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--accent); /* anellino accento, stondato come i pallini */
}
.card-list strong{ color: var(--ink); font-family: 'Satoshi-Bold', sans-serif; font-weight: 700; }
.card-list em{ font-style: italic; color: var(--ink); }

/* CTA: mantiene la sfumatura accento anche a riposo */
.card--cta,
.card--cta:hover{ background: linear-gradient(180deg, var(--card-bg) 0%, color-mix(in srgb, var(--accent) 8%, var(--card-bg)) 100%); }
.contacts{ display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 1.6rem; }
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.6rem; border-radius: 9999px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: 'Satoshi-Bold', sans-serif; font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background-color .4s ease;
  box-shadow: 0 10px 24px -12px var(--accent);
}
.btn:hover{ transform: translateY(-2px); }
.contact{
  display: inline-flex; align-items: center;
  padding: .8rem 1.2rem; border-radius: 9999px;
  border: 1px solid var(--ink-faint); color: var(--ink-soft); text-decoration: none;
  font-family: 'Satoshi-Medium', sans-serif; font-weight: 500;
}
a.contact:hover{ color: var(--ink); border-color: var(--ink-soft); }

.site-footer{
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between;
  padding: 1.15rem clamp(1.1rem, 5vw, 3rem) clamp(1.26rem, 3.15vw, 1.89rem);   /* top/bottom -10% ulteriore */
  border-top: 1px solid var(--ink-faint);
  color: var(--ink-soft); font-size: .85rem;
}
.credit{ display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-soft); text-decoration: none; }
a.credit:hover{ color: var(--ink); text-decoration: underline; }
.footer-links{ display: inline-flex; flex-wrap: wrap; gap: .4rem 1rem; }
.footer-links a{ color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover{ color: var(--ink); text-decoration: underline; }

/* ----------------------------- Reveal "scattoso" ----------------------------- */
/* apparizione più marcata quando la card entra in vista (più movimento + leggera scala) */
.reveal{
  opacity: 0; transform: translateY(56px) scale(.96);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.85,.25,1);
}
.reveal.is-visible{ opacity: 1; transform: none; }

/* ============================================================
   SVG dell'animazione (stili che erano inline in logo-dotsy-home-v5.html
   — necessari a animazione-dotsy.js). Usa var(--ink): si adatta al tema.
   ============================================================ */
/* max-height: col viewBox e il preserveAspectRatio di default (xMidYMid meet), quando il tetto
   entra in gioco il disegno viene rimpicciolito e centrato in orizzontale, mai stirato. */
#logo{ width: 100%; height: auto; max-height: var(--logo-max-h);
       display: block; overflow: visible; background: transparent; }

.dot{
  fill: var(--ink); fill-opacity: 0;
  stroke: var(--ink); stroke-width: 2.66;          /* anello spesso = nuovo logo */
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transition: stroke .3s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.dot.is-outline{ opacity: 1; fill-opacity: 0; }                          /* traccia */
.dot.is-head   { opacity: 1; fill-opacity: 1; transform: scale(1.16); }  /* testa piena */

.edge{ fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.wordmark{ fill: var(--ink); opacity: 0; transition: opacity .6s ease; }
.wordmark.show{ opacity: 1; }

/* ----------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  /* niente animazione sulla riduzione dell'header da scroll (padding e misura dei controlli) */
  body, .theme-toggle, .contact-ctrl, .anim-ctrl,
  .site-header, .doc-header, .doc-home{ transition: none !important; }
  .dot, .edge, .wordmark{ transition: none !important; }
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Pagine documento (privacy, cookie) — stile "pagina normale"
   Riusa i token/tema definiti sopra.
   ============================================================ */
/* Header fisso: banda piena fin da subito (in home invece è trasparente finché non si
   scrolla, per lasciar vedere l'animazione sotto). La riduzione da scroll è la stessa:
   qui la classe `is-scrolled` arriva da js/doc-header.js, in home da js/landing.js.
   `sticky` e non `fixed`: resta ancorato in alto scrollando ma occupa il suo spazio,
   così .doc non deve compensarne l'altezza (che cambia tra mobile e desktop). */
.doc-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--ink-faint);
  box-shadow: var(--shadow-soft);
  padding: var(--header-pad-y) 0;   /* stesso ritmo verticale di .site-header */
  transition: padding .25s ease;
}
/* Stessa impaginazione di .site-header: a tutta larghezza (non incolonnato con il testo
   di .doc), wordmark a sinistra e controlli spinti a destra, stesso padding orizzontale. */
.doc-header-inner{
  display: flex; align-items: center; gap: .6rem;
  padding: 0 clamp(.8rem, 2vw, 1.2rem);
}
/* wordmark: unico ritorno alla home (tipografia condivisa con .header-brand).
   Dimensione e spaziatura ricalcano quelle di .brand-name da mobile; da 1024px
   il font scende a una misura propria dell'header documento (vedi blocco desktop). */
.doc-home{
  margin-right: auto;   /* spinge i controlli a destra */
  text-decoration: none;
  transition: font-size .25s ease;
}
.doc-home:hover{ color: var(--ink-soft); }

/* Scrollando, la barra si compatta: meno padding, wordmark e controlli più piccoli.
   `is-scrolled` arriva da js/doc-header.js qui e da js/landing.js sulla home (stessa
   soglia, 24px). Padding e wordmark restano prefissati .doc-page perché agiscono su
   elementi che esistono solo qui; i controlli invece sono gli stessi ovunque, quindi la
   loro misura compatta è condivisa (vedi anche il blocco mobile in fondo al file). */
.doc-page.is-scrolled .doc-header{ padding-top: .4rem; padding-bottom: .4rem; }
/* stessa scala della misura estesa ridotta al 80%: così resta sempre più piccolo del base,
   a qualunque larghezza (con un valore fisso avrebbe superato il base sui telefoni) */
.doc-page.is-scrolled .doc-home{ font-size: clamp(1.04rem, 3.34vw, 2.34rem); }
.is-scrolled .contact-ctrl,
.is-scrolled .anim-ctrl,
.is-scrolled .theme-toggle{ width: 32px; height: 32px; }   /* > 24px minimo AA (WCAG 2.5.8) */

@media (min-width: 1024px){
  /* stesso padding orizzontale di .site-header su desktop (qui senza il termine --sbw:
     nelle pagine documento scrolla la finestra, non un contenitore interno) */
  .doc-header-inner{ padding-left: 1.5rem; padding-right: clamp(1rem, 2.5vw, 2rem); }
  .doc-home{ font-size: 1.9rem; letter-spacing: 2.5rem; }   /* spaziatura = .brand-name da desktop */
  .doc-page.is-scrolled .doc-home{ font-size: 1.5rem; }
  /* da desktop la home non è mai `is-scrolled` (scrolla .content, non la finestra):
     in pratica questa regola vale solo per le pagine documento */
  .is-scrolled .contact-ctrl,
  .is-scrolled .anim-ctrl,
  .is-scrolled .theme-toggle{ width: 40px; height: 40px; }
}

.doc{
  max-width: 72ch; margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1.1rem, 5vw, 1.5rem) clamp(3rem, 8vw, 5rem);
}
.doc h1{
  font-family: 'Satoshi-Black', sans-serif; font-weight: 900; letter-spacing: -0.015em;
  font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: .2rem 0 .4rem;
}
.doc h2{
  font-family: 'Satoshi-Bold', sans-serif; font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(1.2rem, 3.2vw, 1.5rem); line-height: 1.2; margin: 2rem 0 .5rem;
}
.doc p, .doc li{ color: var(--ink-soft); }
.doc strong{ color: var(--ink); font-family: 'Satoshi-Bold', sans-serif; font-weight: 700; }
/* link in linea col colore del testo (leggibili anche in dark mode), sottolineati per riconoscibilità */
.doc a{ color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover{ color: var(--ink-soft); }
.doc ul{ padding-left: 1.2rem; display: grid; gap: .5rem; margin: .6rem 0; }
.doc-updated{ color: var(--ink-soft); font-size: .9rem; margin: 0 0 1.5rem; }
.doc-note{
  border: 1px solid var(--ink-faint); border-radius: var(--radius);
  background: var(--card-bg); padding: 1rem 1.2rem; margin: 1.5rem 0;
  color: var(--ink-soft); font-size: .92rem;
}
/* header e footer sono a tutta larghezza come in home: solo .doc resta incolonnato */

/* ============================================================
   Mobile: ritocchi specifici (<1024px)
   IN FONDO al file: così sovrascrive le regole base .card/.card-*.
   ============================================================ */
@media (max-width: 1023.98px){
  /* bottoni header: secondo passo del -10% (44 -> 40 -> 36px), 32px da scrollato.
     Sopra il minimo AA di 24px (WCAG 2.5.8), ma sotto i 44px del target AAA (WCAG 2.5.5).
     Da qui scende anche --header-h, quindi il titolo del sito resta allineato ai bottoni
     senza ritocchi manuali. */
  :root{ --header-btn: 36px; }
  .contact-ctrl .icon, .anim-ctrl .icon, .theme-toggle .icon{ width: 16px; height: 16px; }
  /* qui la banda è alta 60vh, non 100vh: il tetto del logo va ricalcolato di conseguenza */
  :root{ --logo-max-h: max(60px, 60vh - 13rem); }
  /* Il viewBox centra il logo COMPLETO (griglia + scritta). Da mobile lo alziamo di metà
     ingombro della scritta, così a centrare è la griglia 4x4: -5.7% = 7,71 unità di viewBox.
     La percentuale è esatta perché l'altezza del disegno coincide sempre con quella del
     riquadro, sia col tetto attivo (riempie l'altezza, aria ai lati) sia senza. */
  #logo{ transform: translateY(-5.7%); }
  /* banda del brand in alto: altezza massima 60vh (min-height abbassato, altrimenti prevarrebbe) */
  .brand-inner{ min-height: auto; max-height: 60vh; }
  /* titolo sito: sui telefoni scende fino a 1.3rem; slogan +5% */
  .brand-name{ font-size: clamp(1.3rem, 4.17vw, 2.92rem); }
  .brand-slogan{ font-size: clamp(1.10rem, 2.52vw, 1.79rem); }
  /* testo card -10% (titolo card invariato) */
  .card-eyebrow{ font-size: 0.91rem; }
  .card-lead{ font-size: clamp(1.19rem, 2.97vw, 1.49rem); }
  .card-text{ font-size: 1.1rem; }
  /* elenchi: stile standard (pallino rientrato come desktop), solo dimensione testo */
  .card-list li{ font-size: 1.14rem; }
  /* card "nude": niente sfondo/bordo/ombra/sfumatura e niente padding laterale;
     niente scroll-snap (scorrimento libero) */
  .card{
    scroll-snap-align: none; scroll-snap-stop: normal;
    padding-left: 0; padding-right: 0;
    background: transparent; border: none; box-shadow: none;
  }
  .card.is-active{ box-shadow: none; }
  .card:hover{ background: transparent; }
  .card--cta, .card--cta:hover{ background: transparent; }
  html{ scroll-snap-type: none; }
  /* niente fade/animazione di comparsa delle card su mobile */
  .reveal{ opacity: 1; transform: none; transition: none; }
  /* content a piena larghezza: testo a filo col padding (header allineato) */
  .content{ max-width: none; margin: 0; gap: clamp(3.5rem, 9vw, 5.5rem); }   /* ancora più spazio tra le card */
  /* header: stesso padding laterale del content -> tutto allineato (idem pagine documento) */
  .site-header,
  .doc-header-inner{ padding-left: clamp(1.1rem, 5vw, 3rem); padding-right: clamp(1.1rem, 5vw, 3rem); }
  /* Scrollando giù la barra della home diventa piena (titolo fisso + bordo) e si compatta
     esattamente come quella delle pagine documento: stesso padding e stessa misura del
     wordmark, così l'header da mobile è identico in tutte le viste.
     La compattazione agisce su `padding` diretto e MAI su --header-pad-y/--header-btn:
     quelle alimentano --header-h, cioè la line-height dell'<h1> in flusso, e cambiarle
     sulla soglia dei 24px rifluirebbe la pagina facendo sfarfallare la barra. */
  body.is-scrolled .site-header{
    background: var(--bg); border-bottom-color: var(--ink-faint); box-shadow: var(--shadow-soft);
    padding-top: .4rem; padding-bottom: .4rem;      /* = .doc-page.is-scrolled .doc-header */
  }
  body.is-scrolled .header-brand{
    opacity: 1; visibility: visible;
    font-size: clamp(1.04rem, 3.34vw, 2.34rem);     /* = .doc-page.is-scrolled .doc-home */
  }
}