.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #0B0F14;
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 38px rgba(2,6,23,.22);
  z-index: 2200;
}
.to-top:hover{ background:#111827; }

.to-top:hover{ background: #111827; }
.to-top.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

    :root{
      --bg:#0B0F14;
      --surface:#FFFFFF;
      --surface-2:#F8FAFC;
      --text:#0F172A;
      --muted:#64748B;
      --line:#E5E7EB;
      --accent:#F2C200;
      --accent-2:#FFD84D;

      --radius:18px;
      --shadow: 0 12px 30px rgba(2,6,23,.10);
      --shadow-2: 0 18px 50px rgba(2,6,23,.14);

      --max: 1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 60%, #FFFFFF 100%);
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    .container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
    .pill{
      display:inline-flex; gap:10px; align-items:center;
      padding:8px 12px; border:1px solid rgba(255,255,255,.18);
      border-radius:999px; background:rgba(255,255,255,.08);
      color:#fff; font-weight:600; font-size:13px;
      backdrop-filter: blur(8px);
      margin-top: 15px;
    }
    .dot{width:10px;height:10px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 6px rgba(242,194,0,.16)}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 16px; border-radius:12px; border:1px solid transparent;
      font-weight:700; letter-spacing:.2px; cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
      user-select:none;
    }
    .btn:active{transform:translateY(1px)}
    .btn-primary{
      background:var(--accent);
      color:#0B0F14;
      box-shadow: 0 10px 22px rgba(242,194,0,.22);
    }
    .btn-primary:hover{background:var(--accent-2)}
    .btn-ghost{
      background:rgba(255,255,255,.10);
      color:#fff;
      border-color: rgba(255,255,255,.18);
    }
    .btn-ghost:hover{background:rgba(255,255,255,.16)}
    .btn-light{
      background:#fff; border-color:var(--line);
      box-shadow: 0 10px 22px rgba(15,23,42,.06);
    }
    .btn-light:hover{box-shadow: var(--shadow)}
    .kbd{
      font-size:12px; padding:2px 8px; border-radius:8px;
      border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.10);
      color:#fff;
    }

    /* Header */
  header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229,231,235,.85);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
body{ padding-top: 78px; }
main{ padding-top: 78px; }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:18px;
    }
    .brand{display:flex; align-items:center; gap:12px; min-width: 200px}
    .brand img{width:44px;height:44px}
    .brand strong{font-size:15px; letter-spacing:.4px}
    .brand span{display:block; font-size:12px; color:var(--muted); font-weight:600; margin-top:1px}

    .menu{display:flex; gap:18px; align-items:center}
    .menu a{
      font-weight:700; font-size:14px;
      color:#111827;
      padding:8px 10px; border-radius:10px;
      transition: background .12s ease;
    }
    .menu a:hover{background:rgba(15,23,42,.06)}
    .nav-actions{display:flex; gap:10px; align-items:center}

    .burger{display:none; border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; font-weight:800}
    .mobile{
      display:none;
      padding: 0 0 14px 0;
    }
    .mobile .panel{
      border:1px solid rgba(229,231,235,.9);
      border-radius:16px;
      padding:10px;
      background:#fff;
      box-shadow: var(--shadow);
    }
    .mobile a{display:block; padding:10px 12px; border-radius:12px; font-weight:800}
    .mobile a:hover{background:rgba(15,23,42,.06)}
    .mobile .row{display:flex; gap:10px; padding:10px 12px}

    /* Hero */
    .hero{
      position:relative;
      background: radial-gradient(1200px 600px at 20% 20%, rgba(242,194,0,.18) 0%, transparent 60%),
                  radial-gradient(900px 500px at 90% 25%, rgba(148,163,184,.24) 0%, transparent 55%),
                  linear-gradient(180deg, #0B0F14 0%, #0B0F14 55%, transparent 56%);
      color:#fff;
      padding: 48px 0 0 0;
      overflow:hidden;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap:28px;
      align-items:stretch;
      padding-bottom: 36px;
    }
    .hero h1{
      font-size: clamp(30px, 3.2vw, 46px);
      line-height:1.06;
      margin: 14px 0 12px;
      letter-spacing:-.8px;
    }
    .hero p{
      color: rgba(255,255,255,.80);
      font-size: 16px;
      line-height:1.6;
      margin: 0 0 18px;
      max-width: 62ch;
    }
    .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 14px}
    .hero-trust{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
      padding-top: 10px;
    }
    .trust-card{
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.16);
      border-radius: var(--radius);
      padding:14px;
      backdrop-filter: blur(8px);
    }
    .trust-card b{display:block; font-size:13px}
    .trust-card span{display:block; margin-top:4px; color:rgba(255,255,255,.74); font-weight:600; font-size:12px; line-height:1.35}

    .hero-side{
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.16);
      border-radius: 22px;
      padding: 18px;
      box-shadow: var(--shadow-2);
      backdrop-filter: blur(10px);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height: 310px;
    }
    .hero-side h3{margin:0 0 8px; font-size:14px; letter-spacing:.3px}
    .hero-side .mini{color:rgba(255,255,255,.78); font-weight:600; font-size:12px; line-height:1.5}
    .hero-side .stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
    .stat{
      background: rgba(11,15,20,.35);
      border:1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      padding: 12px;
    }
    .stat b{font-size:16px}
    .stat span{display:block; margin-top:4px; color:rgba(255,255,255,.72); font-size:12px; font-weight:600}

    /* Sections */
    section{padding: 56px 0}
    .section-head{
      display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom: 22px;
    }
    .section-head h2{
      margin:0;
      font-size: 26px;
      letter-spacing:-.4px;
    }
    .section-head p{margin:0; color:var(--muted); font-weight:600; max-width: 64ch}

    .grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
    .card{
      background: var(--surface);
      border:1px solid rgba(229,231,235,.9);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: 0 10px 24px rgba(15,23,42,.05);
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      position:relative;
      overflow:hidden;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: rgba(242,194,0,.35);
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(242,194,0,.35);
      background: rgba(242,194,0,.12);
      font-weight:800;
      font-size:12px;
      color:#5B4A00;
    }
    .card h3{margin:12px 0 8px; font-size:16px}
    .card p{margin:0; color:var(--muted); font-weight:600; line-height:1.6}
    .card .link{
      display:inline-flex; gap:8px; align-items:center;
      margin-top: 14px;
      font-weight:900;
      color:#0B0F14;
      padding:10px 12px;
      border-radius:12px;
      background: rgba(15,23,42,.04);
    }
    .card .link:hover{background: rgba(242,194,0,.16)}

    .split{
      display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:stretch;
    }
    .panel{
      background: var(--surface);
      border:1px solid rgba(229,231,235,.9);
      border-radius: 22px;
      padding: 22px;
      box-shadow: 0 12px 30px rgba(15,23,42,.06);
    }
    .list{
      margin: 14px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .list li{
      display:flex; gap:10px;
      padding:10px 12px;
      border:1px solid rgba(229,231,235,.9);
      border-radius: 14px;
      background: #fff;
    }
    .check{
      width:18px; height:18px; border-radius:6px;
      background: rgba(242,194,0,.18);
      border:1px solid rgba(242,194,0,.35);
      flex:0 0 auto;
      margin-top:2px;
    }
    .list b{font-size:13px}
    .list span{display:block; font-size:12px; color:var(--muted); font-weight:650; margin-top:2px; line-height:1.4}

    .cta{
      background: radial-gradient(800px 420px at 20% 30%, rgba(242,194,0,.20) 0%, transparent 55%),
                  radial-gradient(700px 420px at 90% 20%, rgba(148,163,184,.30) 0%, transparent 55%),
                  linear-gradient(180deg, #0B0F14 0%, #0B0F14 100%);
      color:#fff;
      border-radius: 26px;
      padding: 26px;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow-2);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }
    .cta h3{margin:0; font-size:18px}
    .cta p{margin:6px 0 0; color:rgba(255,255,255,.78); font-weight:600; max-width: 70ch; line-height:1.5}
    .cta .right{display:flex; gap:12px; flex-wrap:wrap}

    footer{
      background: #0B0F14;
      color: rgba(255,255,255,.86);
      padding: 44px 0;
      margin-top: 60px;
    }
    .foot{
      display:grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap:18px;
      align-items:start;
    }
    footer a{color: rgba(255,255,255,.86)}
    footer a:hover{color:#fff}
    .foot small{color: rgba(255,255,255,.62); font-weight:650}
    .foot h4{margin:0 0 10px; font-size:13px; letter-spacing:.4px}
    .foot ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
    .foot .brandline{display:flex; align-items:center; gap:12px}
    .foot .brandline img{width:40px;height:40px}
    .subfoot{
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.12);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    /* Responsive */
    @media (max-width: 920px){
      .hero-grid{grid-template-columns:1fr; }
      .grid-3{grid-template-columns:1fr; }
      .split{grid-template-columns:1fr;}
      .menu{display:none}
      .burger{display:inline-flex}
      .mobile.show{display:block}
      .brand{min-width:auto}
      .foot{grid-template-columns:1fr}
    }

    html{ scroll-behavior: smooth; }

    :root{
  /* ...le tue variabili... */
  --header-h: 30px;     /* altezza effettiva header */
  --anchor-gap: 12px;   /* un respiro extra sotto header */
}

/* il browser terrà conto dell’header quando scrolla verso un’ancora */
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--anchor-gap));
}

/* quando vai su una sezione con id, la ferma più in basso */
section[id]{
  scroll-margin-top: calc(var(--header-h) + var(--anchor-gap));
}

body{ padding-top: var(--header-h); }
main{ padding-top: 0; }

/* --- STILI PAGINE INTERNE --- */

/* Hero ridotta per le sottopagine */
.page-hero {
    padding: 40px 0 60px;
    background: radial-gradient(800px 400px at 50% 0%, rgba(242,194,0,.15) 0%, transparent 60%);
    border-bottom: 1px solid var(--line);
    text-align: center;
}
.page-hero h1 { margin: 10px 0; font-size: 38px; letter-spacing: -1px; }
.page-hero p { color: var(--muted); font-size: 18px; max-width: 60ch; margin: 0 auto; }
.back-link { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; display: inline-block; margin-bottom: 10px; }
.back-link:hover { color: var(--accent); }

/* Layout Contenuto: Griglia testo + sidebar */
.page-content { padding: 60px 0; }
.page-content .container { 
    display: grid; 
    grid-template-columns: 2fr 1fr; /* Sinistra largo, Destra stretto */
    gap: 60px; 
    align-items: start;
}

/* Tipografia per testi lunghi (Prose) */
.prose { font-size: 17px; line-height: 1.7; color: #334155; }
.prose h2 { font-size: 28px; margin-top: 0; color: var(--text); letter-spacing: -.5px; }
.prose h3 { font-size: 22px; margin-top: 40px; margin-bottom: 15px; color: var(--text); }
.prose ul { padding-left: 20px; margin-bottom: 24px; }
.prose li { margin-bottom: 10px; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }

/* Box evidenziato nel testo */
.highlight-box {
    background: var(--surface-2);
    border-left: 4px solid var(--accent);
    padding: 20px;
    border-radius: 0 12px 12px 0;
    margin: 30px 0;
}

/* Sidebar */
.sidebar .panel { padding: 24px; position: sticky; top: 100px; } /* Sticky: ti segue mentre scrolli */
.full-width { width: 100%; text-align: center; }
.small { font-size: 14px; color: var(--muted); margin-bottom: 15px; }

/* Mobile */
@media (max-width: 900px) {
    .page-content .container { grid-template-columns: 1fr; gap: 40px; }
    .sidebar .panel { position: static; }
}

/* Assicurati che questo esista nel tuo style.css */
.mobile {
  display: none; /* Di base nascosto */
  /* ... altri stili ... */
}

/* Questa è la classe fondamentale che aggiunge JS */
.mobile.show {
  display: block !important;
}
/* css/style.css */

/* css/style.css */
/* css/style.css */

.btn-ghost {
  background: rgba(11, 15, 20, 0.6); /* Colore scuro semi-trasparente */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-ghost:hover {
  background: #0B0F14; /* Diventa nero solido */
  border-color: rgba(255, 255, 255, 0.6);
}

/* css/style.css - BOTTONE TORNA SU */

.floating-pill {
  position: fixed;
  bottom: 30px; /* Distanza dal fondo */
  left: 50%;    /* Posizionamento orizzontale al centro */
  transform: translateX(-50%) translateY(100px); /* Di base è nascosto (spostato in giù) */
  
  display: flex;
  align-items: center;
  gap: 8px;
  
  padding: 10px 20px;
  background: rgba(11, 15, 20, 0.85); /* Sfondo scuro semi-trasparente */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px; /* Forma a pillola */
  
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px); /* Effetto vetro */
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Animazione fluida */
  z-index: 9000;
  pointer-events: none; /* Non cliccabile quando nascosto */
}

/* Quando aggiungiamo la classe .visible via JS */
.floating-pill.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* Torna alla posizione originale */
  pointer-events: auto;
}

.floating-pill:hover {
  background: #0B0F14; /* Diventa solido al passaggio */
  border-color: var(--accent); /* Bordo giallo Kintado */
  transform: translateX(-50%) translateY(-3px); /* Leggero saltello in alto */
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
}

/* Su mobile, magari lo spostiamo a destra per non coprire contenuti centrali?
   Se lo vuoi SEMPRE centrale, salta questa parte. */
@media (max-width: 768px) {
  .floating-pill span {
    display: none; /* Nascondi testo su mobile, lascia solo freccia */
  }
  .floating-pill {
    padding: 12px;
    border-radius: 50%; /* Diventa un cerchio */
    bottom: 20px;
  }
}

.floating-pill {
  /* ... le altre regole ... */
  /* CAMBIA QUESTI DUE VALORI PER TESTARE */
  opacity: 1 !important; 
  transform: translateX(-50%) translateY(0) !important;
  /* ... */
}

/* --- BOTTONE FLOTTANTE (Pillola) --- */
.floating-pill {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px); /* Nascosto sotto */
  
  display: flex;
  align-items: center;
  gap: 8px;
  
  padding: 10px 20px;
  background: rgba(11, 15, 20, 0.9); /* Sfondo scuro */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  z-index: 9999; /* Altissimo per stare sopra a tutto */
  
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  
  opacity: 0; /* Invisibile di base */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effetto rimbalzo */
  pointer-events: none;
}

/* Classe aggiunta via JS quando scorri */
.floating-pill.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.floating-pill:hover {
  background: #000;
  border-color: var(--accent); /* Diventa giallo */
  transform: translateX(-50%) translateY(-5px);
}

.floating-pill svg {
  width: 16px;
  height: 16px;
}

/* Mobile: solo icona */
@media (max-width: 768px) {
  .floating-pill span { display: none; }
  .floating-pill { padding: 12px; border-radius: 50%; bottom: 20px; }
}

/* --- BOTTONE FLOTTANTE UNICO E PULITO --- */
.floating-pill {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%); /* Centrato orizzontalmente */
  
  display: flex;
  align-items: center;
  gap: 8px;
  
  padding: 10px 24px;
  background: #0B0F14; /* Sfondo scuro solido */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  z-index: 9999;
  
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  
  /* PER ORA LO LASCIAMO VISIBILE FISSO PER TESTARE */
  opacity: 1; 
  pointer-events: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-pill:hover {
  background: #000;
  border-color: #F2C200; /* Giallo Accent */
  transform: translateX(-50%) translateY(-4px); /* Sale leggermente */
  box-shadow: 0 15px 30px rgba(242, 194, 0, 0.15);
}

.floating-pill svg {
  width: 16px;
  height: 16px;
}

/* Su mobile nascondiamo il testo e lasciamo solo la freccia */
@media (max-width: 768px) {
  .floating-pill span { display: none; }
  .floating-pill { padding: 14px; border-radius: 50%; bottom: 20px; }
}