/* Font ospitati sul sito (niente richieste a Google). Solo caratteri latini.
   Archivo (Omnibus-Type), Newsreader (Production Type), IBM Plex Mono (IBM): SIL Open Font License 1.1. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url("archivo-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:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;src:url("newsreader-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:"Newsreader";font-style:italic;font-weight:300 600;font-display:swap;src:url("newsreader-italic-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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("ibm-plex-mono-400-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}

/* Layout: il nome su una riga a tutta larghezza come un'insegna, poi sezioni in colonna separate da filetti.
   La pagina è costruita come un annuncio: "Sponsorizzato" in testa, URL visualizzato e "Scopri di più" in fondo.
   La storia è un piccolo grafico a barre che cresce. Chiaro di default, scuro se il sistema è in dark mode. */
:root{
  --paper:#F1F2F4;
  --ink:#0E1220;
  --muted:#596072;
  --line:#D6D9E0;
  --bar:#B8BECB;
  --accent:#1F3FD8;
  --on-accent:#FFFFFF;

  --font-display:"Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter:clamp(16px, 4vw, 56px);
  --section-pad:clamp(64px, 9vw, 128px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D0F14; --ink:#EDEEF2; --muted:#9AA1B2; --line:#262B36; --bar:#3B4252;
    --accent:#8FA3FF; --on-accent:#0D0F14;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0D0F14; --ink:#EDEEF2; --muted:#9AA1B2; --line:#262B36; --bar:#3B4252;
  --accent:#8FA3FF; --on-accent:#0D0F14;
  color-scheme:dark;
}

[hidden]{display:none !important}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.page{max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}

.mono{
  font-family:var(--font-mono);font-size:12px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- Barra ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:16px;
  border-bottom:1px solid var(--line);
}
.lang{display:flex;align-items:center;color:var(--muted)}
.lang__btn{
  appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--muted);padding:8px 7px;
}
.lang__btn:hover{color:var(--ink)}
.lang__btn[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- Hero ---------- */
.hero{
  --fit:5.3; /* larghezza del nome / font-size: la ricalcola lo script quando il font è caricato */
  container-type:inline-size;
  display:grid;gap:clamp(16px, 2.4vw, 32px);
  padding-block:clamp(36px, 6vw, 88px) clamp(48px, 7vw, 104px);
}
.tag{
  display:inline-flex;align-items:center;gap:8px;justify-self:start;
  color:var(--muted);
}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.name{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;font-stretch:62%;
  font-size:calc(100cqi / var(--fit));
  line-height:.82;letter-spacing:-.005em;
  text-transform:uppercase;white-space:nowrap;
}
.name__fit{display:block;width:max-content}
.hero__sub{
  margin:0;max-width:28em;
  font-size:clamp(20px, 2vw, 27px);line-height:1.4;
  color:var(--muted);text-wrap:pretty;
}
.hero__sub strong{font-weight:500;color:var(--ink)}

/* ---------- Sezioni ---------- */
.block{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,3fr);
  column-gap:clamp(24px, 4vw, 64px);
  row-gap:28px;
  padding-block:var(--section-pad);
  border-top:1px solid var(--line);
}
.block--stack{grid-template-columns:minmax(0,1fr)}
@media (max-width:719px){.block{grid-template-columns:minmax(0,1fr)}}
.block__label{margin:0;color:var(--muted)}
.block__body{min-width:0;display:grid;gap:clamp(44px, 6vw, 80px)}

.manifesto{
  margin:0;max-width:22em;
  font-weight:400;font-size:clamp(28px, 3.7vw, 56px);line-height:1.12;letter-spacing:-.012em;
  color:var(--muted);text-wrap:pretty;
}
.manifesto strong{font-weight:400;font-style:italic;color:var(--ink)}

.lede{margin:0;max-width:32em;font-size:clamp(20px, 1.9vw, 25px);line-height:1.5;text-wrap:pretty}

.metrics{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));margin:0}
.metric{
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  padding-inline:clamp(14px, 2.2vw, 32px);
  border-left:1px solid var(--line);
}
.metric:first-child{border-left:0;padding-left:0}
.metric__label{color:var(--muted);font-size:11px;line-height:1.5}
.metric__value{
  margin:0;
  font-family:var(--font-display);font-weight:900;font-stretch:62%;
  font-size:clamp(56px, 8vw, 128px);line-height:.85;
  font-variant-numeric:tabular-nums;
}
.metric__plus{color:var(--accent)}

/* ---------- Storia: un grafico a barre che cresce ---------- */
.story{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6, minmax(0,1fr));
  column-gap:0;row-gap:56px;
}
@media (max-width:1099px){.story{grid-template-columns:repeat(3, minmax(0,1fr))}}
.stage{display:flex;flex-direction:column;gap:12px;min-width:0}
.stage__chart{height:88px;display:flex;align-items:flex-end;border-bottom:1px solid var(--ink)}
.stage:nth-child(1){--g:.12}
.stage:nth-child(2){--g:.2}
.stage:nth-child(3){--g:.32}
.stage:nth-child(4){--g:.46}
.stage:nth-child(5){--g:.66}
.stage:nth-child(6){--g:1}
.stage__bar{display:block;width:14px;height:calc(var(--g) * 100%);background:var(--bar)}
.stage--now .stage__bar{background:var(--accent)}
.stage__name{
  margin:4px 0 0;padding-right:24px;
  font-family:var(--font-display);font-weight:700;font-stretch:85%;
  font-size:clamp(19px, 1.6vw, 23px);line-height:1.15;
}
.stage__text{margin:0;padding-right:24px;font-size:16px;line-height:1.5;color:var(--muted)}
.stage__now{color:var(--accent)}
@media (max-width:599px){
  .story{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .stage__chart{height:auto;border-bottom:0}
  .stage__bar{height:8px;width:calc(var(--g) * 100%)}
}

/* ---------- Chiusura: la parte bassa di un annuncio ---------- */
.cta{
  display:grid;gap:24px;
  padding-block:var(--section-pad);
  border-top:1px solid var(--line);
}
.cta__title{
  margin:0;
  font-family:var(--font-display);font-weight:900;font-stretch:62%;
  font-size:clamp(56px, 10vw, 168px);line-height:.86;
  text-transform:uppercase;text-wrap:balance;
}
.cta__text{margin:0;max-width:30em;font-size:clamp(20px, 1.9vw, 25px);color:var(--muted);text-wrap:pretty}
.ad-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  max-width:640px;margin-top:8px;padding-top:16px;
  border-top:1px solid var(--line);
}
.ad-bar__url{color:var(--muted);text-transform:lowercase;letter-spacing:.06em}
.button{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 22px;border-radius:4px;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.2;text-decoration:none;
  transition:filter .2s ease;
}
.button:hover{filter:brightness(1.15)}
.button__arrow{display:inline-block;transition:transform .2s ease}
.button:hover .button__arrow{transform:translate(3px, -3px)}

/* ---------- Footer ---------- */
.footer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  padding-block:24px 40px;
  border-top:1px solid var(--line);
  color:var(--muted);
}
.footer a{color:var(--ink);text-decoration:none}
.footer a:hover{color:var(--accent)}
.social{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;margin:0;padding:0}

@media (prefers-reduced-motion:reduce){
  .button,.button__arrow{transition:none}
}