:root{--leading:28px;--half:14px;--edge:clamp(20px,5vw,72px);--measure:60ch}
body{margin:0;background:radial-gradient(1200px 720px at 82% -160px,color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),radial-gradient(1100px 800px at -10% 100%,color-mix(in srgb, black 30%, transparent), transparent 55%),var(--color-bg);text-wrap:pretty}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--edge)}
.kicker{display:block;font-size:13px;line-height:var(--half);letter-spacing:0.06em;text-transform:uppercase;margin:0 0 calc(var(--leading) - var(--half))}
.sez{padding:calc(2.5*var(--leading)) 0;scroll-margin-top:var(--leading)}
.sez+.sez{border-top:1px solid var(--color-divider)}
.sez h2{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(26px,3.2vw,34px);line-height:1.2;letter-spacing:-0.012em;margin:0 0 var(--leading)}
.testo{font-size:16px;line-height:var(--leading);color:color-mix(in srgb, var(--color-text) 82%, transparent);max-width:var(--measure);margin:0 0 var(--half)}

.hero{padding:calc(3*var(--leading)) 0 calc(2*var(--leading))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:calc(2*var(--leading));align-items:center}
.lista-clienti{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--space-3)}
.cliente{border:1px solid var(--color-neutral-800);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-surface) 70%, transparent);padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px}
.cliente b{font-size:15px;color:var(--color-text)}
.cliente span{font-size:12.5px;line-height:1.4;color:color-mix(in srgb, var(--color-text) 62%, transparent)}
.due-colonne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(2*var(--leading))}
.chi{display:flex;align-items:center;gap:var(--space-6);margin-bottom:var(--leading)}
.ritratto{width:104px;height:104px;border-radius:50%;object-fit:cover;border:2px solid var(--color-accent-600);box-shadow:0 0 0 6px color-mix(in srgb, var(--color-accent) 18%, transparent);flex:none}
.nome{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-0.018em;margin:0}
.ruolo{font-size:17px;line-height:var(--leading);color:var(--color-accent-300);margin:var(--space-2) 0 0}
.hero .testo{font-size:16px}
.azioni{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--leading)}

.terminale{border:1px solid var(--color-neutral-700);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-md);overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.7}
.terminale .barra{display:flex;gap:7px;padding:10px 14px;border-bottom:1px solid var(--color-neutral-800)}
.terminale .barra i{width:11px;height:11px;border-radius:50%;background:var(--color-neutral-700)}
.terminale pre{margin:0;padding:var(--space-8);white-space:pre-wrap;overflow-wrap:anywhere;color:color-mix(in srgb, var(--color-text) 85%, transparent)}
.terminale .cmd::before{content:"$ ";color:var(--color-accent-400)}
.terminale .out{color:var(--color-neutral-400)}
.terminale .cursore::before{content:"$ ";color:var(--color-accent-400)}
.terminale .cursore::after{content:"";display:inline-block;width:8px;height:1.1em;vertical-align:text-bottom;background:var(--color-accent-400);animation:lampeggia 1.1s steps(1) infinite}
@keyframes lampeggia{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.terminale .cursore::after{animation:none}}

.numeri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--leading);list-style:none;margin:0;padding:0 0 calc(2*var(--leading))}
.numeri li{border:1px solid var(--color-neutral-800);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-surface) 70%, transparent);padding:var(--space-8)}
.numeri b{display:block;font-family:var(--font-heading);font-size:36px;line-height:1.1;color:var(--color-text)}
.numeri span{font-size:14px;color:color-mix(in srgb, var(--color-text) 65%, transparent)}

.tappe{list-style:none;margin:0;padding:0 0 0 var(--space-8);border-left:2px solid var(--color-neutral-800);max-width:760px}
.tappa{position:relative;padding:0 0 calc(1.2*var(--leading))}
.tappa::before{content:"";position:absolute;left:calc(-1*var(--space-8) - 7px);top:7px;width:12px;height:12px;border-radius:50%;background:var(--color-bg);border:2px solid var(--color-accent-400)}
.tappa .periodo{font-size:13px;letter-spacing:0.04em;color:var(--color-accent-300);font-feature-settings:"tnum" 1;margin:0}
.tappa h3{font-size:19px;line-height:var(--leading);margin:2px 0 0}
.tappa .azienda{font-size:15px;color:color-mix(in srgb, var(--color-text) 70%, transparent);margin:0}
.tappa .testo{font-size:15px;margin:var(--space-2) 0 0}

.gruppi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--leading)}
.gruppo h3{font-size:15px;letter-spacing:0.03em;margin:0 0 var(--space-3);color:var(--color-text)}
.etichette{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.etichette li{border:1px solid var(--color-neutral-700);border-radius:999px;padding:4px 12px;font-size:13px;color:color-mix(in srgb, var(--color-text) 82%, transparent);background:color-mix(in srgb, var(--color-surface) 60%, transparent)}

.certs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4)}
.cert{border:1px solid var(--color-neutral-800);border-radius:var(--radius-md);background:var(--color-surface);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-2)}
.badge-img,.badge-vuoto{width:96px;height:96px;margin-bottom:var(--space-3)}
.badge-img{object-fit:contain}
.badge-vuoto{display:flex;align-items:center;justify-content:center;border:2px dashed var(--color-neutral-700);border-radius:50%;font-size:13px;font-weight:600;letter-spacing:0.04em;color:color-mix(in srgb, var(--color-text) 60%, transparent)}
.sotto{font-size:17px;margin:calc(1.5*var(--leading)) 0 var(--space-4)}
.cert.corso .stato{border:1px solid var(--color-neutral-700);color:color-mix(in srgb, var(--color-text) 70%, transparent)}
.credly{display:inline-block;margin-top:var(--leading);font-size:14px;color:var(--color-accent-300)}
.cert .ente{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:color-mix(in srgb, var(--color-text) 55%, transparent);margin:0}
.cert h3{font-size:17px;line-height:1.35;margin:0}
.cert .stato{align-self:flex-start;font-size:12px;border-radius:999px;padding:3px 10px;margin-top:auto}
.cert.ottenuta .stato{background:color-mix(in srgb, var(--color-accent) 22%, transparent);color:var(--color-accent-200)}
.cert.in-preparazione{border-style:dashed}
.cert.in-preparazione .stato{border:1px solid var(--color-neutral-700);color:color-mix(in srgb, var(--color-text) 70%, transparent)}
.cert-verifica{font-size:13px;color:var(--color-accent-300)}

.principi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--leading);list-style:none;margin:var(--leading) 0 0;padding:0}
.principi b{display:block;font-size:16px;margin-bottom:var(--space-2)}
.principi span{font-size:15px;line-height:1.6;color:color-mix(in srgb, var(--color-text) 75%, transparent)}

.progetti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--leading)}
.progetto{border:1px solid var(--color-neutral-800);border-radius:var(--radius-lg);background:var(--color-surface);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.progetto.attivo{border-color:var(--color-accent-700);box-shadow:0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent),var(--shadow-md)}
.progetto h3{font-size:21px;margin:0}
.progetto .testo{font-size:15px;margin:0}
.progetto .etichette{margin-top:auto}
.progetto .btn{align-self:flex-start}
.stato-p{align-self:flex-start;font-size:12px;letter-spacing:0.04em;border-radius:999px;padding:3px 10px;border:1px solid var(--color-neutral-700);color:color-mix(in srgb, var(--color-text) 70%, transparent)}
.attivo .stato-p{border-color:transparent;background:color-mix(in srgb, var(--color-accent) 22%, transparent);color:var(--color-accent-200)}

.nota{border-left:2px solid var(--color-accent-600);padding-left:var(--space-6);font-size:15px}
.nota-privacy{font-size:12.5px;line-height:1.6;max-width:96ch;margin:var(--space-4) 0 0;color:color-mix(in srgb, var(--color-text) 55%, transparent)}
.nota-privacy a{color:var(--color-accent-300)}
.contatti{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--leading)}
.contatti .btn{display:inline-flex;align-items:center;gap:var(--space-3)}
.contatti .btn-ghost{border:1px solid var(--color-neutral-700);padding:11px 18px}
.contatti .btn-ghost:hover{border-color:var(--color-accent-400)}
.logo-superprof{height:18px;width:auto;display:block;flex:none}
.nav-social{flex-wrap:wrap;row-gap:var(--space-2)}

@media (max-width:880px){
  .hero{padding-top:calc(2*var(--leading))}
  .hero-grid,.due-colonne{grid-template-columns:1fr;gap:var(--leading)}
  .principi,.progetti{grid-template-columns:1fr}
}
@media (max-width:520px){
  .numeri{gap:var(--space-3)}
  .numeri li{padding:var(--space-4)}
  .numeri b{font-size:28px}
  .numeri span{font-size:12.5px;line-height:1.35;display:block;hyphens:auto}
  /* Nove schede impilate allungherebbero la pagina di tre schermate: il badge
     va a sinistra, il testo a destra. */
  .cert{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--space-8);row-gap:var(--space-1);align-content:start;padding:var(--space-6)}
  .cert>*{grid-column:2}
  .cert>.badge-img,.cert>.badge-vuoto{grid-column:1;grid-row:1 / span 4;width:64px;height:64px;margin:0}
  .badge-vuoto{font-size:11px}
  .cert .stato{justify-self:start;margin-top:var(--space-2)}
  .chi{flex-direction:column;align-items:flex-start}
  .lista-clienti{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
  .cliente{padding:var(--space-3) var(--space-4)}
  .cliente b{font-size:14px}
  .cliente span{font-size:11.5px;hyphens:auto}
}