/* ==========================================================================
   fit-x.it — la pagina «in arrivo»

   I colori e le misure sono quelli del design system di FitX
   (fitx/docs/02-design-system.md): il nero del pannello di accesso, il verde
   del marchio per gli accenti, il verde chiaro dove sopra c'e' testo nero.
   Non si importa il foglio del prodotto: pesa quanto un gestionale, e questa e'
   una pagina sola.

   Il carattere e' servito da qui e non da Google Fonts: caricarlo da li'
   manderebbe a Google l'indirizzo IP di ogni visitatore, senza che nessuno
   l'abbia chiesto. Manrope e' sotto licenza OFL (fonti/OFL.txt).
   ========================================================================== */
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/fonti/manrope-latin.woff2') format('woff2');
}
:root{
  --nero:#0B0C0C; --superficie:#131515; --linea:#222626;
  --bianco:#FFFFFF; --grigio:#A9AEAE; --grigio-2:#7C8282;
  --verde:#76BC21; --verde-chiaro:#B7F04F;
  --font:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--nero);color:var(--bianco)}
body{
  font-family:var(--font); font-size:16px; line-height:1.55; font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Un alone verde dietro il titolo: la luce di una sala accesa la mattina
     presto, non una decorazione. Resta sotto il testo e non ne tocca il
     contrasto. */
  background:
    radial-gradient(60rem 36rem at 85% -10%, rgba(118,188,33,.16), transparent 60%),
    radial-gradient(40rem 30rem at -10% 110%, rgba(183,240,79,.06), transparent 60%),
    var(--nero);
  min-height:100vh; min-height:100dvh;
}
.pagina{
  max-width:1120px; margin:0 auto; min-height:100vh; min-height:100dvh;
  padding:28px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:48px;
}
.logo{height:34px; width:auto; display:block}

.corpo{flex:1; display:flex; flex-direction:column; justify-content:center}
.arrivo{
  display:inline-flex; align-items:center; gap:8px; width:max-content; margin:0 0 22px;
  padding:7px 14px; border-radius:999px; background:var(--verde-chiaro); color:#0E1011;
  font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
}
.punto{width:8px;height:8px;border-radius:50%;background:#0E1011;animation:pulsa 1.8s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}

h1{
  margin:0; font-size:clamp(40px, 7vw, 76px); font-weight:800; letter-spacing:-.035em; line-height:1.02;
  max-width:20ch;
}
.lead{margin:22px 0 0; max-width:56ch; font-size:clamp(17px, 2vw, 19px); color:var(--grigio)}

.punti{
  list-style:none; margin:56px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px;
}
.punti li{
  background:var(--superficie); border:1px solid var(--linea); border-radius:22px; padding:22px;
}
.icona{
  width:40px; height:40px; padding:9px; border-radius:12px; display:block; margin-bottom:16px;
  background:rgba(118,188,33,.12); fill:none; stroke:var(--verde-chiaro); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.punti h2{margin:0 0 6px; font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.3}
.punti p{margin:0; font-size:14.5px; color:var(--grigio)}

.piede{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  padding-top:22px; border-top:1px solid var(--linea); font-size:13px; color:var(--grigio-2);
}

@media (min-width:900px){
  .pagina{padding-top:40px; padding-bottom:36px}
  .logo{height:40px}
}
@media (prefers-reduced-motion:reduce){ .punto{animation:none} }
.lead a{color:var(--verde-chiaro)}