/* Vetrina visirank.it — foglio condiviso dalle 8 pagine IT/EN.
   Nessun framework, nessuna build: si serve statico.
   Font self-hostati (vincolo: no CDN, no Google Fonts). */
@font-face{font-family:"Josefin Sans";src:url("/vetrina/fonts/JosefinSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Josefin Sans";src:url("/vetrina/fonts/JosefinSans-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Josefin Sans";src:url("/vetrina/fonts/JosefinSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Raleway";src:url("/vetrina/fonts/Raleway-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Raleway";src:url("/vetrina/fonts/Raleway-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Raleway";src:url("/vetrina/fonts/Raleway-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  /* Marca: verde firma, nero, bianco, neutro. Nessun valore fuori da questi. */
  --green:#5F8723; --green-700:#4B6C1B; --green-800:#3A5417; --green-soft:#EAF1DE;
  --black:#1D1D1B; --white:#FFFFFF;
  --ink-700:#3E414A; --ink-500:#797C85; --ink-300:#C9CBCE; --ink-100:#F2F3F4;
  /* Accenti certificati: uno solo per composizione. */
  --blu:#3085AC; --bordeaux:#862041; --arancio:#C05017;
  /* Accento della pagina: assegnato dalla body class. */
  --accento:var(--green);
}
body.pg-demand{--accento:var(--blu)}
body.pg-lead{--accento:var(--arancio)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Raleway",sans-serif;color:var(--black);background:var(--white);line-height:1.65;font-size:17px}
h1,h2,h3,h4,.eyebrow{font-family:"Josefin Sans",sans-serif;line-height:1.15}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--green-700)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
.eyebrow{color:var(--green);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:14px;margin-bottom:14px}
h2{font-size:clamp(28px,4vw,40px);font-weight:700;margin-bottom:20px}
h3{font-size:21px;font-weight:600}
.lead-p{font-size:19px;color:var(--ink-700);max-width:64ch}
.skip{position:absolute;left:-9999px;top:0;background:var(--black);color:var(--white);padding:12px 20px;z-index:100}
.skip:focus{left:0}

/* Paragrafo di risposta diretta: primo blocco di ogni pagina di contenuto. */
.risposta{font-size:20px;color:var(--ink-700);max-width:66ch;line-height:1.6}
.risposta strong{color:var(--black)}

/* Header */
header{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--ink-100);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{font-family:"Josefin Sans",sans-serif;font-weight:700;font-size:22px;color:var(--black);text-decoration:none}
.brand sup{color:var(--green);font-size:.5em}
.nav-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav-link{font-family:"Josefin Sans",sans-serif;font-weight:600;font-size:16px;color:var(--black);text-decoration:none}
.nav-link:hover,.nav-link.is-current{color:var(--green-800);text-decoration:underline;text-underline-offset:5px}
.lang{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;letter-spacing:.06em}
.lang a{color:var(--ink-500);text-decoration:none}
.lang a:hover{color:var(--green-800)}
.lang-on{color:var(--black)}
.lang-sep{color:var(--ink-300)}
.btn{display:inline-block;font-family:"Josefin Sans",sans-serif;font-weight:600;text-decoration:none;border-radius:8px;padding:12px 26px;font-size:16px;transition:background .15s}
.btn-primary{background:var(--green);color:var(--white)}
.btn-primary:hover{background:var(--green-700)}
.btn-outline{border:2px solid var(--black);color:var(--black);padding:10px 22px}
.btn-outline:hover{background:var(--black);color:var(--white)}
.btn-ghost{color:var(--black);font-size:15px;text-decoration:none;font-weight:500}

/* Hero */
.hero{padding:96px 0 72px;text-align:center}
.hero h1{font-size:clamp(52px,8vw,88px);font-weight:700;letter-spacing:-.01em}
.hero h1 sup{color:var(--green);font-size:.35em;vertical-align:super}
.hero .sub{font-family:"Josefin Sans",sans-serif;font-weight:600;color:var(--green);font-size:clamp(20px,3vw,28px);margin:6px 0 22px}
.hero .claim{font-size:clamp(19px,2.6vw,24px);color:var(--ink-700);max-width:34ch;margin:0 auto 34px}
.hero .firma{color:var(--ink-500);font-size:15px;margin-top:26px}
.hero-visual{margin-top:56px;border-radius:12px;overflow:hidden;box-shadow:0 24px 70px rgba(29,29,27,.16)}
.hero-testo{text-align:left;max-width:70ch}
.hero-testo .claim{margin-left:0}

/* Pittogramma a mulinello: grande e una volta sola, a vivo sul bordo. */
.hero--marca{position:relative;overflow:hidden}
.hero--marca::after{content:"";position:absolute;right:-140px;top:-90px;width:460px;height:460px;
  background:url('/vetrina/brand/pinwheel-green.svg') no-repeat center/contain;opacity:.10;pointer-events:none}

/* Home di famiglia: le due linee, peso visivo identico */
.linee{background:var(--ink-100)}
.linee-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:12px}
.linea-card{background:var(--white);border-radius:14px;padding:38px 34px;border-top:5px solid var(--green);display:flex;flex-direction:column}
.linea-card h3{font-size:clamp(24px,3vw,30px);font-weight:700;margin-bottom:6px}
.linea-card h3 sup{color:var(--green);font-size:.4em;vertical-align:super}
.linea-card .misura{font-family:"Josefin Sans",sans-serif;font-weight:600;color:var(--green-800);font-size:18px;margin-bottom:16px}
.linea-card p{color:var(--ink-700);font-size:16.5px;margin-bottom:14px}
.linea-card .prova-riga{font-size:15.5px;color:var(--ink-500);border-left:3px solid var(--ink-300);padding-left:14px;margin:6px 0 24px}
.linea-card .btn{margin-top:auto;align-self:flex-start}

/* Cosa hanno in comune */
.comune-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
.comune-grid div{border-top:2px solid var(--green);padding-top:18px;color:var(--ink-700);font-size:16.5px}
.comune-grid strong{display:block;font-family:"Josefin Sans",sans-serif;font-size:18px;color:var(--black);margin-bottom:6px}
.principio{font-family:"Josefin Sans",sans-serif;font-weight:600;font-size:clamp(20px,2.8vw,26px);color:var(--green-800);max-width:44ch;margin-top:44px;line-height:1.35}

/* Endorsement ARvis */
.endorsement{background:var(--ink-100)}
.endorsement .wrap{display:flex;gap:44px;align-items:center;flex-wrap:wrap}
.endorsement img{width:190px;flex:none}
.endorsement p{max-width:56ch;color:var(--ink-700)}

/* Rimando all'altra linea */
.rimando{padding:44px 0;border-top:1px solid var(--ink-300);border-bottom:1px solid var(--ink-300)}
.rimando p{font-family:"Josefin Sans",sans-serif;font-weight:600;font-size:clamp(19px,2.4vw,23px)}
.rimando a{color:var(--green-800)}

/* Il problema / punti */
.problema{background:var(--ink-100)}
.tre-punti{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.punto{background:var(--white);border-radius:12px;padding:30px 26px;font-size:16.5px;color:var(--ink-700);border-top:4px solid var(--green)}

/* Cosa fa (lead) */
.cosafa-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;margin-top:16px}
.card4{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{background:var(--white);border:1px solid var(--ink-300);border-radius:12px;padding:26px 24px}
.card h3{font-size:20px;color:var(--green-800);margin-bottom:8px}
.card p{font-size:15.5px;color:var(--ink-700)}

/* Cruscotti (lead) */
.cruscotto{background:var(--ink-100)}
.due-col{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:44px}
.shot{background:var(--white);border-radius:12px;padding:18px;box-shadow:0 10px 34px rgba(29,29,27,.10)}
.shot img{border-radius:8px}
.shot figcaption{font-family:"Josefin Sans",sans-serif;font-weight:600;font-size:18px;text-align:center;padding:16px 6px 4px}

.chiusura{font-family:"Josefin Sans",sans-serif;font-weight:600;font-size:22px;margin-top:38px;color:var(--green-800)}

/* Blocco scuro "i dati restano tuoi": mulinello grande, una volta sola. */
.dati{background:var(--black);position:relative;overflow:hidden}
.dati::before{content:"";position:absolute;left:-120px;bottom:-160px;width:520px;height:520px;
  background:url('/vetrina/brand/pinwheel-white.svg') no-repeat center/contain;opacity:.06;pointer-events:none}
.dati .wrap{position:relative}
.dati p{color:var(--white);font-family:"Josefin Sans",sans-serif;font-weight:600;font-size:clamp(24px,3.6vw,34px);max-width:26ch;margin:0 auto;text-align:center;line-height:1.4}
.dati strong{color:var(--green-soft)}

/* Referenza misurata: unico punto d'accento della pagina Lead. */
.prova blockquote{font-size:clamp(19px,2.4vw,23px);color:var(--ink-700);max-width:56ch;margin:0 auto;border:0;border-left:3px solid var(--accento);padding-left:26px}

/* Linea AI 4 Sales */
.linea{background:var(--ink-100)}
.linea-flex{display:flex;gap:44px;align-items:center;flex-wrap:wrap}
.linea img{width:190px;flex:none}
.linea p{max-width:56ch}

/* Metodo in tre passi (demand) */
.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px;list-style:none;counter-reset:passo}
.passi li{counter-increment:passo;border-top:2px solid var(--accento);padding-top:20px;color:var(--ink-700);font-size:16.5px}
.passi li::before{content:counter(passo);font-family:"Josefin Sans",sans-serif;font-weight:700;font-size:32px;color:var(--accento);display:block;line-height:1}
.passi strong{display:block;font-family:"Josefin Sans",sans-serif;font-size:19px;color:var(--black);margin:8px 0 8px}
.frase-chiave{font-family:"Josefin Sans",sans-serif;font-weight:600;font-size:clamp(21px,2.8vw,27px);color:var(--green-800);max-width:40ch;margin-top:44px;line-height:1.35}

/* Il dato come visual: SVG inline + tabella reale degli stessi numeri */
.dato{background:var(--ink-100)}
.dato-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start;margin-top:36px}
.grafico{background:var(--white);border-radius:12px;padding:26px 22px 18px}
.grafico svg{width:100%;height:auto}
.legenda{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-size:14.5px;color:var(--ink-700)}
.legenda span{display:flex;align-items:center;gap:8px}
.legenda i{width:14px;height:14px;border-radius:3px;display:block}
.fonte{font-size:14px;color:var(--ink-500);margin-top:16px;line-height:1.5}
.tabella-dati{width:100%;border-collapse:collapse;background:var(--white);border-radius:12px;overflow:hidden;font-size:15.5px}
.tabella-dati caption{text-align:left;font-family:"Josefin Sans",sans-serif;font-weight:600;font-size:17px;padding:20px 20px 12px;color:var(--black)}
.tabella-dati th,.tabella-dati td{padding:11px 16px;border-bottom:1px solid var(--ink-100);text-align:right}
.tabella-dati th[scope="row"],.tabella-dati thead th:first-child{text-align:left}
.tabella-dati thead th{font-family:"Josefin Sans",sans-serif;font-weight:600;color:var(--ink-700);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.tabella-dati tbody tr:last-child td,.tabella-dati tbody tr:last-child th{border-bottom:0}
.tabella-scroll{overflow-x:auto}

/* Controprova */
.controprova{border-left:4px solid var(--accento);padding-left:28px;max-width:64ch;margin-top:36px}
.controprova p{color:var(--ink-700);margin-bottom:14px}

/* Cinque anni di erogazione */
.storia{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:36px}
.storia div{background:var(--ink-100);border-radius:12px;padding:26px 24px;color:var(--ink-700);font-size:16.5px}
.storia strong{display:block;font-family:"Josefin Sans",sans-serif;font-size:18px;color:var(--black);margin-bottom:6px}

/* A chi serve */
.destinatari{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px;list-style:none}
.destinatari li{border-top:2px solid var(--green);padding-top:16px;color:var(--ink-700);font-size:16px}
.destinatari strong{display:block;font-family:"Josefin Sans",sans-serif;font-size:18px;color:var(--black);margin-bottom:6px}

/* FAQ */
.faq{background:var(--ink-100)}
.faq dl{margin-top:36px;max-width:82ch}
.faq dt{font-family:"Josefin Sans",sans-serif;font-weight:700;font-size:20px;margin-top:30px;padding-top:26px;border-top:1px solid var(--ink-300)}
.faq dt:first-of-type{border-top:0;padding-top:0;margin-top:0}
.faq dd{color:var(--ink-700);margin-top:10px;max-width:72ch}

/* CTA finale */
.cta-fin{background:var(--green);text-align:center}
.cta-fin h2{color:var(--white);max-width:24ch;margin:0 auto 30px}
.cta-fin .btn{background:var(--white);color:var(--green-800)}
.cta-fin .btn:hover{background:var(--green-soft)}

/* Footer */
footer{background:var(--black);color:var(--ink-300);padding:56px 0;font-size:14.5px}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
footer img{width:150px;margin-bottom:14px}
footer a{color:var(--ink-100)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}

/* Pagine di testo lungo (privacy) */
.prose{max-width:820px;margin:0 auto;padding:56px 24px 80px}
.prose h1{font-family:"Josefin Sans",sans-serif;font-size:34px;margin-bottom:6px}
.prose h2{font-family:"Josefin Sans",sans-serif;font-size:21px;margin:34px 0 10px;color:var(--green-800)}
.prose p{margin-bottom:14px}
.prose .meta{color:var(--ink-500);margin-bottom:28px}
.prose hr{border:0;border-top:1px solid var(--ink-300);margin:36px 0 18px}
.prose .marchi{color:var(--ink-500);font-size:14.5px;font-style:italic}

@media (max-width:980px){
  .destinatari{grid-template-columns:1fr 1fr}
  .dato-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  section{padding:64px 0}
  .tre-punti,.cosafa-grid,.card4,.due-col,.linee-grid,.comune-grid,.passi,.storia{grid-template-columns:1fr}
  .hero{padding:64px 0 48px}
  .cosafa-visual{max-width:420px;margin:0 auto}
  .nav{height:auto;padding-top:12px;padding-bottom:12px}
  .hero--marca::after{width:300px;height:300px;right:-100px;top:-60px}
}
@media (max-width:560px){
  .destinatari{grid-template-columns:1fr}
  .nav-right{gap:12px}
  .btn{padding:10px 18px;font-size:15px}
}