/* ============================================================
   WASTDATA · Infinicity — sitio institucional
   Design system "Civic Green" — documento institucional europeo
   ============================================================ */

:root{
  /* --- palette (BRAND.md §4) --- */
  --paper:       #FBFAF7;
  --paper-2:     #F4F2EC;
  --paper-3:     #FFFFFF;
  --ink:         #10261C;
  --ink-2:       #4A5C53;
  --ink-3:       #7C8B83;
  --green:       #0F7A4C;
  --green-deep:  #0A5636;
  --green-soft:  #E6F2EB;
  --terra:       #C8551F;
  --terra-soft:  #FAEDE6;
  --amber:       #B8860B;
  --amber-soft:  #FAF3DF;
  --line:        #E4E1D8;
  --line-strong: #CFCBBE;

  /* --- superficie scura delle "finestre tecniche" --- */
  --window:      #0C1D16;
  --window-line: rgba(251,250,247,.16);
  --window-txt:  rgba(251,250,247,.62);

  /* --- tipografia --- */
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --maxw: 1200px;
  --gut: 40px;
  --r: 3px;
  --r-lg: 5px;
  --sh: 0 1px 2px rgba(16,38,28,.05);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.66;
  font-feature-settings:'kern' 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block; }
figure{ margin:0; }
pre{ margin:0; }
h1,h2,h3,h4,h5{ margin:0; font-weight:600; line-height:1.15; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
::selection{ background:var(--green-soft); color:var(--ink); }

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

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); position:relative; }

/* ============================================================
   SCALA TIPOGRAFICA
   ============================================================ */
.eyebrow{
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--green-deep);
  line-height:1.5;
}
h2.sec{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(31px,4.3vw,55px); line-height:1.04; letter-spacing:-.018em;
  color:var(--ink); max-width:19ch; text-wrap:balance;
}
h2.sec.wide{ max-width:24ch; }
.lead{
  font-size:clamp(17px,1.4vw,20px); line-height:1.58; color:var(--ink-2);
  max-width:66ch; margin-top:22px;
}
h3.sub{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(23px,2.3vw,31px); line-height:1.12; letter-spacing:-.012em; color:var(--ink);
  max-width:30ch;
}
h3.sub.bar{ border-top:1px solid var(--line-strong); padding-top:26px; max-width:none; }
h4.min{ font-size:16.5px; font-weight:600; letter-spacing:-.008em; color:var(--ink); }
.small{ font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.mono{ font-family:var(--mono); }

.tag{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; padding:5px 9px;
  border:1px solid var(--line-strong); border-radius:2px; color:var(--ink-2); background:var(--paper);
}
.tag.green{ color:var(--green-deep); border-color:#BFDCCC; background:var(--green-soft); }
.tag.rust { color:var(--terra);      border-color:#EBC9B7; background:var(--terra-soft); }
.tag.blue { color:var(--ink-2);      border-color:var(--line-strong); background:var(--paper-2); }

/* ============================================================
   SEZIONI E RITMO
   ============================================================ */
section{ padding:112px 0; position:relative; }
section.tight{ padding:78px 0; }
.band-2{ background:var(--paper-2); }
.band-3{ background:var(--paper-3); }
.band-terra{ background:var(--terra-soft); }
.band-green{ background:var(--green-soft); }
.band-2,.band-3,.band-terra,.band-green{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* intestazione di sezione: numero + occhiello in colonna marginale */
.sec-head{
  display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:0 40px;
  border-top:2px solid var(--ink); padding-top:24px;
}
.sec-head.solo{ grid-template-columns:1fr; }
.sec-head .eyebrow{ padding-top:6px; }
.sec-head .lead{ max-width:60ch; }
.sec-body{ margin-top:56px; }

.mt-xl{ margin-top:64px; }
.mt-lg{ margin-top:40px; }
.mt-md{ margin-top:24px; }
.mt-sm{ margin-top:14px; }

/* ============================================================
   NAVIGAZIONE
   ============================================================ */
header.nav{
  position:sticky; top:0; z-index:200;
  background:rgba(251,250,247,.94);
  backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{ display:flex; align-items:center; gap:26px; height:72px; }
.brand{ display:flex; flex-direction:column; gap:1px; text-decoration:none; flex:none; }
.brand .b1{ font-family:var(--serif); font-weight:600; font-size:23px; letter-spacing:-.015em; line-height:1; color:var(--ink); }
.brand .b2{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--ink-2); text-transform:uppercase; }
.nav-links{ display:flex; gap:22px; margin-left:auto; align-items:center; }
.nav-links a{
  text-decoration:none; font-size:14px; color:var(--ink-2); white-space:nowrap;
  padding:4px 0; border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
.nav-links a:hover{ color:var(--ink); border-bottom-color:var(--green); }

.langs{ display:flex; gap:1px; border:1px solid var(--line-strong); border-radius:2px; padding:2px; flex:none; background:var(--paper-3); }
.langs button{
  background:none; border:0; color:var(--ink-2); font-family:var(--mono);
  font-size:11px; font-weight:500; letter-spacing:.1em; padding:5px 8px; cursor:pointer; border-radius:1px;
}
.langs button:hover{ color:var(--ink); }
.langs button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:550;
  padding:13px 24px; border-radius:var(--r); text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary{ background:var(--green); color:#fff; border-color:var(--green); }
.btn-primary:hover{ background:var(--green-deep); border-color:var(--green-deep); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); background:var(--paper-3); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-sm{ padding:9px 15px; font-size:13.5px; }
.nav-cta{ flex:none; }
.mob-cta{ display:none; }
.burger{ display:none; background:none; border:1px solid var(--line-strong); border-radius:2px; padding:8px 10px; cursor:pointer; }
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); margin:3.5px 0; }

/* barra di avanzamento */
.progress{ position:absolute; left:0; bottom:-1px; height:2px; background:var(--green); width:0; z-index:2; }

/* indice laterale */
.docnav{
  position:fixed; left:16px; top:50%; transform:translateY(-50%); z-index:90;
  display:none; flex-direction:column; gap:2px;
}
.docnav a{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-2);
  padding:3px 0; transition:color .2s;
}
.docnav a::after{ content:''; width:12px; height:1px; background:var(--line-strong); transition:width .25s var(--ease), background .25s; }
.docnav a:hover{ color:var(--ink-2); }
.docnav a.on{ color:var(--green-deep); font-weight:600; }
.docnav a.on::after{ width:22px; background:var(--green); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:0; border-bottom:1px solid var(--line); background:var(--paper); }
.hero-in{ padding:64px var(--gut) 0; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); gap:52px; align-items:start; }

.hero-badge{
  display:inline-block; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep);
  border:1px solid #BFDCCC; background:var(--green-soft);
  padding:7px 12px; border-radius:2px; margin-bottom:30px;
}
h1.hero-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(31px,3.9vw,54px); line-height:1.05; letter-spacing:-.02em;
  max-width:17ch; text-wrap:balance; color:var(--ink);
}
h1.hero-title em{ font-style:normal; color:var(--green); }

.hero-claim{
  margin-top:28px; padding:14px 0 14px 20px; border-left:3px solid var(--green);
  font-family:var(--serif); font-size:clamp(18px,1.6vw,22px); line-height:1.34;
  letter-spacing:-.01em; color:var(--ink); max-width:44ch;
}
.hero-sub{ margin-top:22px; font-size:15.5px; line-height:1.62; color:var(--ink-2); }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

.hero-kpis{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:2px solid var(--ink); margin-top:56px;
}
.kpi{ padding:24px 22px 30px 0; border-right:1px solid var(--line); }
.kpi:last-child{ border-right:0; padding-right:0; }
.kpi .v{
  font-family:var(--serif); font-weight:600; font-size:clamp(42px,4.6vw,64px);
  line-height:.94; letter-spacing:-.035em; color:var(--green-deep);
  font-variant-numeric:lining-nums tabular-nums;
}
.kpi .l{
  font-size:13px; line-height:1.42; color:var(--ink-2); margin-top:14px; max-width:22ch;
}
.hero-plate{ position:relative; }

/* ============================================================
   FINESTRE TECNICHE (SVG e video su fondo scuro)
   ============================================================ */
.fig-num{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:9px;
}
.fig,.plate{
  background:var(--window); border:1px solid var(--ink); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh);
}
.fig svg,.plate svg{ width:100%; height:auto; display:block; }
.fig-cap{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--window-txt); padding:13px 18px; border-top:1px solid var(--window-line);
  line-height:1.55;
}
.video-frame{
  background:var(--window); border:1px solid var(--ink); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh);
}
.video-frame video{ width:100%; height:auto; display:block; }
.video-cap{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--window-txt); padding:13px 18px; border-top:1px solid var(--window-line);
}

/* ============================================================
   BLOCCHI GENERICI
   ============================================================ */
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.grid-2-a{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:48px; align-items:start; }
.grid-2-b{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:48px; align-items:start; }
.gap-lg{ gap:56px; }
.grid-2>*,.grid-3>*,.grid-2-a>*,.grid-2-b>*,.payload>*,.roi>*,.demo>*,.modules>*,
.plans>*,.bottleneck>*,.uniq>*,.steps>*,.rung>*,.bar-row>*,.vs-row>*,.foot>*,.cta-box>*{ min-width:0; }

.card{
  background:var(--paper-3); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--sh);
}
.card.pad-lg{ padding:34px; }
.card .small{ color:var(--ink-2); }
.card.rust { background:var(--terra-soft); border-color:#EBC9B7; }
.card.green{ background:var(--green-soft); border-color:#BFDCCC; }
.card.blue { background:var(--paper-2); border-color:var(--line-strong); }
.card h3.sub{ font-size:clamp(20px,1.8vw,25px); }

.statement{
  border-left:3px solid var(--green); background:var(--paper-3);
  border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:0 var(--r) var(--r) 0; padding:28px 32px;
  font-family:var(--serif); font-size:clamp(19px,1.9vw,25px); line-height:1.34; letter-spacing:-.012em;
  color:var(--ink);
}
.statement.rust{ border-left-color:var(--terra); background:var(--terra-soft); border-color:#EBC9B7; border-left-color:var(--terra); }
.statement.dark{
  background:var(--window); border-color:var(--ink); border-left-color:var(--green);
  color:var(--paper); padding:38px 40px; font-size:clamp(20px,2.2vw,29px); line-height:1.28;
}
.note{
  background:var(--paper-2); border:1px solid var(--line); border-left:2px solid var(--line-strong);
  border-radius:0 var(--r) var(--r) 0; padding:20px 24px;
  font-size:14px; line-height:1.62; color:var(--ink-2);
}
.note strong{ color:var(--ink); font-weight:600; }
.band-2 .note{ background:var(--paper); }

/* citazione: momento di respiro */
.quote{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(23px,2.7vw,36px); line-height:1.22; letter-spacing:-.018em;
  color:var(--ink); max-width:24ch; text-wrap:balance;
  padding-top:34px; border-top:2px solid var(--green);
}
.quote.wide{ max-width:30ch; margin:0 auto; text-align:center; border-top:0; position:relative; padding-top:46px; }
.quote.wide::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:52px; height:2px; background:var(--green); }
.quote-band{ padding:104px 0; }

/* ============================================================
   TABELLE
   ============================================================ */
.tbl-wrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper-3); box-shadow:var(--sh);
  -webkit-overflow-scrolling:touch;
}
table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:600px; }
thead th{
  text-align:left; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  padding:15px 18px; background:var(--paper-2);
  border-bottom:1px solid var(--line-strong); white-space:nowrap; vertical-align:bottom;
}
thead th.num{ text-align:right; font-size:10.5px; font-weight:500; }
tbody td{
  padding:14px 18px; border-bottom:1px solid var(--line);
  color:var(--ink-2); vertical-align:top; line-height:1.5;
}
tbody tr:last-child td{ border-bottom:0; }
tbody tr.hl td{ background:var(--green-soft); color:var(--ink); font-weight:500; }
tbody tr.hl td:first-child{ box-shadow:inset 3px 0 0 var(--green); }
tbody tr.hl strong{ color:var(--ink); }
td strong{ color:var(--ink); font-weight:600; }
td.no{ color:var(--terra); }
td.yes{ color:var(--green-deep); }
td.mono{ font-family:var(--mono); font-size:13px; color:var(--ink); white-space:nowrap; }
td.num,th.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
td.num{ font-size:13.5px; color:var(--ink); }
td.num.wrap{ white-space:normal; text-align:left; line-height:1.55; }
td.num.brk{ white-space:normal; line-height:1.55; }
tbody tr:hover td{ background:var(--paper-2); }
tbody tr.hl:hover td{ background:#DCEBE2; }

/* ============================================================
   01 · PROBLEMA
   ============================================================ */
.bottleneck{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:1px solid var(--line-strong); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-3); }
.bn{ padding:34px; border-right:1px solid var(--line-strong); }
.bn:last-child{ border-right:0; }
.bn .n{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--terra); letter-spacing:.16em; text-transform:uppercase; }
.bn h3{ font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.1; margin:14px 0 12px; letter-spacing:-.012em; }
.bn p{ font-size:15.5px; color:var(--ink-2); margin:0; }
.answer{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:12px; align-items:baseline; }
.answer .arw{ color:var(--green); font-family:var(--mono); flex:none; }
.answer div{ font-size:15px; color:var(--ink); }
.answer strong{ color:var(--green-deep); font-weight:600; }

/* ============================================================
   02 · LE CINQUE BARRIERE
   ============================================================ */
.barriers{ border-top:2px solid var(--terra); }
.barrier{
  display:grid; grid-template-columns:110px minmax(0,1fr); gap:0 28px; align-items:start;
  padding:30px 0; border-bottom:1px solid #EBC9B7;
  transition:padding-left .25s var(--ease);
}
.barrier:hover{ padding-left:8px; }
.barrier .idx{
  font-family:var(--serif); font-weight:600; font-size:52px; line-height:.82;
  color:var(--terra); letter-spacing:-.04em; font-variant-numeric:lining-nums;
}
.barrier h4{ font-family:var(--serif); font-weight:500; font-size:23px; line-height:1.14; letter-spacing:-.012em; margin-bottom:10px; }
.barrier p{ font-size:15px; color:var(--ink-2); margin:0; max-width:72ch; }

/* ============================================================
   PIATTAFORMA (nuova sezione)
   ============================================================ */
.modules{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--line-strong); border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden; background:var(--paper-3); }
.mod{ padding:30px 26px 34px; border-right:1px solid var(--line); position:relative; }
.mod:last-child{ border-right:0; }
.mod-n{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; color:var(--ink-2); }
.mod h3{ font-family:var(--serif); font-weight:600; font-size:25px; letter-spacing:-.015em; margin:20px 0 6px; color:var(--ink); }
.mod-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--green-deep); }
.mod p{ font-size:14.5px; line-height:1.58; color:var(--ink-2); margin:16px 0 0; }
.mod::after{ content:''; position:absolute; left:0; top:-1px; width:0; height:2px; background:var(--green); transition:width .35s var(--ease); }
.mod:hover::after{ width:100%; }

.zerosight{
  background:var(--window); color:var(--paper); border:1px solid var(--ink); border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg); padding:38px 40px;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:20px 48px; align-items:start;
}
.zerosight .zs-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#6FC79A; }
.zerosight h3{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,2.6vw,36px); letter-spacing:-.02em; margin-top:12px; }
.zerosight p{ font-size:15.5px; line-height:1.62; color:rgba(251,250,247,.8); margin:0; }

/* ============================================================
   04 · PRIVACY
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--line-strong); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-3); }
.step{ padding:30px 26px; border-right:1px solid var(--line); }
.step:last-child{ border-right:0; }
.step.final{ background:var(--green-soft); }
.step .t{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--green-deep); letter-spacing:.06em; }
.step h4{ font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:-.012em; margin:14px 0 10px; }
.step p{ font-size:14.5px; color:var(--ink-2); margin:0; }

.payload{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:stretch; }
.codewrap{ border:1px solid var(--ink); border-radius:var(--r-lg); overflow:hidden; background:var(--window); }
.codehead{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--window-txt); padding:13px 18px; border-bottom:1px solid var(--window-line);
}
.codeblock{
  margin:0; font-family:var(--mono); font-size:13px; line-height:1.9; padding:22px 20px;
  overflow-x:auto; color:rgba(251,250,247,.86);
}
.codeblock .k{ color:#8FB6A2; }
.codeblock .s{ color:#7FD6A6; }
.codeblock .n{ color:#E9C46A; }

.checks{ display:flex; flex-direction:column; gap:11px; margin-top:18px; }
.check{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:baseline; font-size:14.5px; color:var(--ink-2); }
.check .ic{ font-family:var(--mono); font-size:13px; color:var(--green-deep); font-weight:600; }
.check .ic.x{ color:var(--terra); }

/* ============================================================
   05 · AGENTE
   ============================================================ */
.chart-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper-3); padding:26px; box-shadow:var(--sh); }
.chart-card h4{ margin-bottom:4px; }
.chart-card .small{ color:var(--ink-2); margin-bottom:20px; }
.decay-svg{ width:100%; height:auto; }
.decay-svg .curve{ stroke-dasharray:1200; stroke-dashoffset:1200; transition:stroke-dashoffset 2.4s var(--ease); }
.revealed .decay-svg .curve{ stroke-dashoffset:0; }
.decay-svg .ph{ opacity:0; transition:opacity .6s var(--ease); }
.revealed .decay-svg .ph{ opacity:1; }
.revealed .decay-svg .ph:nth-of-type(1){ transition-delay:.5s }
.revealed .decay-svg .ph:nth-of-type(2){ transition-delay:1.0s }
.revealed .decay-svg .ph:nth-of-type(3){ transition-delay:1.5s }
.revealed .decay-svg .ph:nth-of-type(4){ transition-delay:2.0s }

.bars{ display:flex; flex-direction:column; gap:13px; }
.bar-row{ display:grid; grid-template-columns:minmax(110px,1.05fr) minmax(60px,1fr) auto; gap:14px; align-items:center; font-size:14px; }
.bar-row .lbl{ color:var(--ink); }
.bar-track{ display:block; height:8px; background:var(--paper-2); border:1px solid var(--line); border-radius:1px; overflow:hidden; }
.bar-fill{ display:block; height:100%; width:0; background:var(--green); transition:width 1.3s var(--ease); }
.revealed .bar-fill{ width:var(--w); }
.bar-row .val{ font-family:var(--mono); font-size:12.5px; color:var(--green-deep); min-width:52px; text-align:right; font-variant-numeric:tabular-nums; }
.bar-note{ font-size:12.5px; color:var(--ink-2); grid-column:1/-1; margin-top:-5px; }

/* ---------- demo chat ---------- */
.demo{ display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:54px; align-items:start; }
.phone{
  background:var(--window); border-radius:26px; padding:12px;
  box-shadow:0 18px 40px -24px rgba(16,38,28,.55);
}
.phone-top{ display:flex; align-items:center; gap:10px; padding:8px 10px 12px; }
.phone-top .av{
  width:30px; height:30px; border-radius:50%; background:var(--green); flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; font-weight:600; color:#fff;
}
.phone-top .nm{ font-size:13.5px; font-weight:600; color:var(--paper); }
.phone-top .st{ font-size:11px; color:rgba(251,250,247,.55); }
.phone-body{
  background:var(--paper-2); border-radius:16px;
  min-height:440px; max-height:560px; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px; padding:16px 14px;
}
.bubble{
  background:var(--paper-3); border:1px solid var(--line);
  border-radius:12px 12px 12px 2px; padding:13px 15px;
  font-size:13px; line-height:1.58; color:var(--ink-2); max-width:100%;
  box-shadow:0 1px 1px rgba(16,38,28,.06);
  animation:pop .4s var(--ease) both;
}
.bubble.me{
  background:var(--green-soft); border-color:#BFDCCC; color:var(--ink);
  border-radius:12px 12px 2px 12px; align-self:flex-end; max-width:80%; font-weight:500;
}
.bubble.sys{
  background:transparent; border:0; color:var(--ink-2); font-size:11.5px;
  align-self:center; text-align:center; padding:2px 6px; box-shadow:none; max-width:92%;
}
.bubble.esc{ background:var(--amber-soft); border-color:#E7D5A2; }
.esc-t{ font-family:var(--mono); font-size:11.5px; line-height:1.6; color:#6E5406; display:block; }
.bubble.esc.l4{ background:var(--terra-soft); border-color:#EBC9B7; }
.bubble.esc.l4 .esc-t{ color:#8C3410; }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.bub-title{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.12em; color:var(--green-deep); margin-bottom:10px; }
.bub-kv{ display:grid; grid-template-columns:74px minmax(0,1fr); gap:3px 10px; margin:0; font-family:var(--mono); font-size:11.5px; }
.bub-kv dt{ color:var(--ink-2); }
.bub-kv dd{ margin:0; color:var(--ink); }
.bub-kv dd b{ color:var(--green-deep); font-weight:600; }
.bub-ctx{ margin-top:11px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-2); }
.bub-act{ margin-top:10px; font-size:12px; font-weight:600; color:#6E5406; background:var(--amber-soft); border-radius:2px; padding:7px 9px; }
.bub-btns{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.bub-btns button{
  flex:1 1 auto; background:var(--paper-2); border:1px solid var(--line-strong);
  color:var(--ink); font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.07em;
  padding:9px 8px; border-radius:3px; cursor:pointer; text-transform:uppercase; transition:.16s;
}
.bub-btns button:hover{ background:var(--paper); border-color:var(--ink-2); }
.bub-btns button.ok{ background:var(--green); border-color:var(--green); color:#fff; }
.bub-btns button.ok:hover{ background:var(--green-deep); }
.bub-btns button.no{ background:var(--paper-3); border-color:#EBC9B7; color:var(--terra); }
.bub-btns button.no:hover{ background:var(--terra-soft); }

.demo-side .step-row{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; padding:16px 0;
  border-bottom:1px solid var(--line); opacity:.45; transition:opacity .4s var(--ease);
}
.demo-side .step-row.on{ opacity:1; }
.demo-side .step-row .dot{
  width:9px; height:9px; border-radius:50%; background:var(--line-strong); margin-top:8px; flex:none;
  transition:background .3s, box-shadow .3s;
}
.demo-side .step-row.on .dot{ background:var(--green); box-shadow:0 0 0 4px var(--green-soft); }
.demo-side h4{ font-size:15.5px; margin-bottom:4px; color:var(--ink); }
.demo-side p{ font-size:14px; color:var(--ink-2); margin:0; }
.demo-reset{ margin-top:24px; }

/* ---------- scala di escalation ---------- */
.ladder{ border-top:1px solid var(--line-strong); }
.rung{
  display:grid; grid-template-columns:56px 92px minmax(0,1fr) 210px; gap:22px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.rung .lv{ font-family:var(--mono); font-size:15px; font-weight:600; color:var(--green-deep); }
.rung .tm{ font-family:var(--mono); font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.rung .ac{ font-size:14.5px; color:var(--ink-2); }
.rung .to{ font-size:12.5px; color:var(--ink-2); font-family:var(--mono); }
.rung.l3 .lv{ color:var(--amber); }
.rung.l4{ background:var(--terra-soft); padding-left:16px; padding-right:16px; margin-left:-16px; margin-right:-16px; }
.rung.l4 .lv{ color:var(--terra); }

/* ---------- calendario di rischio ---------- */
.cal{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:auto; background:var(--paper-3); box-shadow:var(--sh); }
.cal table{ min-width:660px; font-size:13.5px; }
.cal td.cell{ font-family:var(--mono); font-size:12.5px; text-align:center; padding:13px 8px; font-variant-numeric:tabular-nums; }
.lvl-low { background:var(--paper-2);  color:var(--ink-2); }
.lvl-mid { background:var(--amber-soft); color:#6E5406; }
.lvl-high{ background:#F5D9CB; color:#8C3410; font-weight:600; }
.cal-legend{ display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-top:14px; align-items:center; }
.cal-legend span{ display:flex; align-items:center; gap:8px; }
.cal-legend i{ width:14px; height:14px; border-radius:2px; display:block; border:1px solid var(--line-strong); }

/* ---------- timeline dispiegamento ---------- */
.tl{ position:relative; padding-left:32px; }
.tl::before{ content:''; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--line-strong); }
.tl-item{ position:relative; padding-bottom:28px; }
.tl-item::before{
  content:''; position:absolute; left:-32px; top:7px; width:11px; height:11px;
  border-radius:50%; background:var(--paper); border:2px solid var(--green);
}
.band-2 .tl-item::before{ background:var(--paper-2); }
.tl-item .w{ font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--green-deep); letter-spacing:.1em; text-transform:uppercase; }
.tl-item h4{ font-family:var(--serif); font-weight:500; font-size:21px; letter-spacing:-.01em; margin:6px 0 6px; }
.tl-item p{ font-size:14.5px; color:var(--ink-2); margin:0; }
.tl-item .out{ font-family:var(--mono); font-size:12.5px; color:var(--ink-2); margin-top:8px; }

.vs-bar{ border-top:1px solid var(--line-strong); padding-top:26px; }
.vs-row{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; align-items:center; margin-bottom:16px; font-size:14px; }
.vs-row .small{ color:var(--ink-2); }
.vs-track{ height:36px; border:1px solid var(--line); border-radius:2px; position:relative; overflow:hidden; background:var(--paper-3); }
.vs-fill{
  position:absolute; inset:0 auto 0 0; width:0;
  display:flex; align-items:center; gap:.34em; padding-left:14px;
  font-family:var(--mono); font-size:12px; font-weight:500; color:#fff;
  transition:width 1.5s var(--ease); white-space:nowrap;
}
.revealed .vs-fill{ width:var(--w); }
.vs-fill.g{ background:var(--green); }
.vs-fill.r{ background:var(--terra); }

/* ============================================================
   09 · ECONOMIA
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--line-strong); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-3); }
.plan{ padding:28px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.plan:last-child{ border-right:0; }
.plan.feat{ background:var(--green-soft); position:relative; }
.plan.feat::after{
  content:attr(data-flag); position:absolute; top:0; right:0;
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:var(--green); color:#fff; padding:4px 10px;
}
.plan .pn{ font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:-.01em; }
.plan .ps{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-top:4px; }
.plan .pf{
  font-family:var(--serif); font-size:36px; font-weight:600; letter-spacing:-.03em;
  color:var(--green-deep); margin:18px 0 4px; line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
.plan .pf small{ font-family:var(--sans); font-size:13px; font-weight:400; color:var(--ink-2); letter-spacing:0; }
.plan .pc{ font-size:13.5px; color:var(--ink-2); margin-top:auto; padding-top:16px; }

.roi{ display:grid; grid-template-columns:minmax(0,1.46fr) minmax(0,.54fr); gap:28px; align-items:stretch; }
.roi-total{
  border:1px solid var(--ink); border-radius:var(--r-lg); background:var(--window); color:var(--paper);
  padding:34px; display:flex; flex-direction:column; justify-content:center;
}
.roi-total .lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#6FC79A; }
.roi-total .big{
  font-family:var(--serif); font-size:clamp(40px,4.6vw,58px); font-weight:600; letter-spacing:-.035em;
  line-height:1; margin-top:8px; font-variant-numeric:lining-nums tabular-nums;
}
.roi-total .sep{ height:1px; background:var(--window-line); margin:24px 0; }
.roi-total .small{ color:rgba(251,250,247,.68); font-size:13px; }

/* ============================================================
   11 · UNICITÀ
   ============================================================ */
.uniq{ border:1px solid var(--line-strong); border-radius:var(--r-lg); background:var(--paper-3); box-shadow:var(--sh); }
.uniq > div{
  display:grid; grid-template-columns:120px minmax(0,1fr); gap:2px 28px;
  padding:28px 32px; border-bottom:1px solid var(--line);
}
.uniq > div:last-child{ border-bottom:0; }
.uniq .u-n{
  grid-row:1 / span 2; font-family:var(--serif); font-weight:600; font-size:44px;
  line-height:.8; color:var(--ink-3); letter-spacing:-.04em;
}
.uniq h4{ font-family:var(--serif); font-weight:500; font-size:23px; letter-spacing:-.014em; margin-bottom:8px; }
.uniq p{ font-size:15px; color:var(--ink-2); margin:0; max-width:78ch; }

/* ============================================================
   12 · CTA
   ============================================================ */
.cta-sec{ background:var(--green-soft); border-top:1px solid #BFDCCC; }
.cta-box{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:start; }
.cta-list{ display:flex; flex-direction:column; gap:0; margin:22px 0 0; padding:0; list-style:none; }
.cta-list li{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; font-size:15.5px; color:var(--ink-2); padding:14px 0; border-bottom:1px solid #C9E0D3; }
.cta-list .n{ font-family:var(--mono); font-size:12px; color:var(--green-deep); padding-top:3px; }
.cta-panel{ border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:34px; background:var(--paper-3); box-shadow:var(--sh); }
.cta-panel .btn{ width:100%; margin-bottom:10px; }
.cta-meta{ font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--ink-2); text-align:center; margin-top:18px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--window); color:rgba(251,250,247,.72); padding:64px 0 36px; }
.foot{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; }
.foot h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#6FC79A; margin:0 0 16px; font-weight:500; }
.foot p{ font-size:14px; line-height:1.6; color:rgba(251,250,247,.68); max-width:46ch; }
.foot a{ font-size:14px; color:rgba(251,250,247,.78); text-decoration:none; border-bottom:1px solid transparent; }
.foot a:hover{ color:var(--paper); border-bottom-color:rgba(251,250,247,.4); }
.foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.foot-bot{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--window-line);
  font-size:12px; line-height:1.6; color:rgba(251,250,247,.5);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px;
}
.foot-bot span:last-child{ text-align:right; }

/* ============================================================
   REVEAL
   ============================================================ */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.revealed{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1400px){
  .docnav{ display:flex; }
}
@media (max-width:1180px){
  :root{ --gut:32px; }
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-plate{ max-width:720px; }
  h1.hero-title{ max-width:18ch; }
}
@media (max-width:1040px){
  .nav-links{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .nav-links.open{
    display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column;
    align-items:flex-start; background:var(--paper); border-bottom:1px solid var(--line);
    padding:20px var(--gut); gap:16px;
  }
  .sec-head{ grid-template-columns:1fr; gap:18px; }
  .sec-head .eyebrow{ padding-top:0; }
  .sec-body{ margin-top:44px; }
  .grid-2-a,.grid-2-b,.demo,.roi,.cta-box{ grid-template-columns:1fr; gap:40px; }
  .modules,.plans{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mod:nth-child(2n){ border-right:0; }
  .mod:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .plan:nth-child(2n){ border-right:0; }
  .plan:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .zerosight{ grid-template-columns:1fr; gap:14px; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:0; border-bottom:1px solid var(--line); }
  .step:last-child{ border-bottom:0; }
  .rung{ grid-template-columns:52px 92px minmax(0,1fr); gap:8px 18px; }
  .rung .to{ grid-column:3; }
  .grid-3{ grid-template-columns:1fr; }
  .foot{ grid-template-columns:1fr 1fr; }
  .foot > div:first-child{ grid-column:1/-1; }
}
@media (max-width:760px){
  :root{ --gut:20px; }
  body{ font-size:16px; }
  section{ padding:72px 0; }
  section.tight{ padding:56px 0; }
  .quote-band{ padding:68px 0; }
  .nav-in{ gap:12px; height:64px; }
  .nav-cta{ display:none; }
  .mob-cta{ display:block; color:var(--green-deep); font-weight:600; }
  .nav-links.open{ top:64px; }
  .brand .b1{ font-size:20px; }
  .langs button{ padding:5px 6px; font-size:10.5px; }
  .hero-in{ padding:44px var(--gut) 0; }
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ width:100%; }
  h1.hero-title{ font-size:clamp(28px,7.6vw,34px); max-width:none; }
  .hero-badge{ margin-bottom:22px; font-size:10px; letter-spacing:.12em; }
  .hero-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:52px; }
  .kpi{ border-right:0; padding:20px 14px 22px 0; border-bottom:1px solid var(--line); }
  .kpi:nth-child(2n){ padding-right:0; }
  .kpi:nth-child(2n+1){ border-right:1px solid var(--line); }
  .kpi:nth-last-child(-n+2){ border-bottom:0; }
  .grid-2,.payload,.bottleneck,.modules,.plans{ grid-template-columns:1fr; }
  .bn{ border-right:0; border-bottom:1px solid var(--line-strong); }
  .bn:last-child{ border-bottom:0; }
  .mod{ border-right:0; border-bottom:1px solid var(--line); }
  .mod:last-child{ border-bottom:0; }
  .plan{ border-right:0; border-bottom:1px solid var(--line); }
  .plan:last-child{ border-bottom:0; }
  .card{ padding:22px; }
  .card.pad-lg{ padding:24px; }
  .statement{ padding:22px 22px; }
  .statement.dark{ padding:26px 24px; }
  .zerosight{ padding:28px 22px; }
  .barrier{ grid-template-columns:1fr; gap:10px; padding:24px 0; }
  .barrier .idx{ font-size:34px; }
  .uniq > div{ grid-template-columns:1fr; gap:8px; padding:24px 22px; }
  .uniq .u-n{ grid-row:auto; font-size:32px; }
  .rung{ grid-template-columns:48px minmax(0,1fr); gap:4px 14px; }
  .rung .ac,.rung .to{ grid-column:2; }
  .vs-row{ grid-template-columns:1fr; gap:10px; }
  .demo{ gap:34px; }
  .foot{ grid-template-columns:1fr; gap:30px; }
  .foot-bot{ grid-template-columns:1fr; gap:12px; }
  .foot-bot span:last-child{ text-align:left; }
  .quote.wide{ max-width:100%; }
  .cta-panel{ padding:24px; }
  table{ min-width:520px; }
  .mt-xl{ margin-top:44px; }
  .mt-lg{ margin-top:30px; }
}

/* tabelle dentro colonne strette: si adattano invece di scorrere */
.grid-2 .tbl-wrap table,
.grid-2-a .tbl-wrap table,
.grid-2-b .tbl-wrap table,
.roi .tbl-wrap table{ min-width:0; }
.grid-2 .tbl-wrap td,.grid-2-a .tbl-wrap td,.grid-2-b .tbl-wrap td,.roi .tbl-wrap td{ padding:11px 13px; font-size:14px; }
.grid-2 .tbl-wrap td.num,.grid-2-a .tbl-wrap td.num,.grid-2-b .tbl-wrap td.num,.roi .tbl-wrap td.num{ font-size:12.5px; }
.grid-2 .tbl-wrap th,.grid-2-a .tbl-wrap th,.grid-2-b .tbl-wrap th,.roi .tbl-wrap th{
  padding:12px 13px; font-size:9.5px; letter-spacing:.1em; white-space:normal;
}

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

@media print{
  .nav,.docnav,.langs,.btn,.progress{ display:none !important; }
  body{ background:#fff; color:#000; }
  section{ padding:28px 0; break-inside:avoid; }
}

/* ============================================================
   MODAL DI PRENOTAZIONE (aggiunto in fase di migrazione a Next.js)
   Riusa i design token esistenti del sistema "Civic Green".
   ============================================================ */
.book-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(16,38,28,.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
}
.book-modal{
  position:relative; width:100%; max-width:540px; max-height:90vh; overflow-y:auto;
  background:var(--paper-3); border-radius:var(--r-lg); padding:34px;
  box-shadow:0 12px 40px rgba(16,38,28,.28);
  animation:pop .22s var(--ease);
}
.book-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; color:var(--ink-2); background:none;
  border:1px solid transparent; border-radius:var(--r); cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.book-close:hover{ background:var(--paper-2); color:var(--ink); }
.book-form{ display:flex; flex-direction:column; gap:14px; }
.book-row{ display:flex; gap:14px; }
.book-row .book-field{ flex:1; min-width:0; }
.book-field{ display:flex; flex-direction:column; }
.book-field label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:6px;
}
.book-field input, .book-field textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:10px 12px; transition:border-color .18s var(--ease);
}
.book-field input:focus, .book-field textarea:focus{ border-color:var(--green); }
.book-field textarea{ resize:vertical; font-family:inherit; }
.book-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.book-status{ border-radius:var(--r); padding:13px 15px; font-size:14.5px; line-height:1.5; }
.book-status.ok{ background:var(--green-soft); color:var(--green-deep); border:1px solid #BFDCCC; }
.book-status.err{ background:var(--terra-soft); color:var(--terra); border:1px solid #EBC9B7; }
.book-actions{ display:flex; gap:10px; margin-top:2px; }
.book-actions .btn{ flex:1; }

@media (max-width:760px){
  .book-modal{ padding:24px; }
  .book-row{ flex-direction:column; gap:14px; }
  .book-actions{ flex-direction:column; }
}