/* ══════════════════════════════════════════════════════════
   NORMIA — DESIGN SYSTEM
   Tokens → primitive, semantic, component
   Palette: navy autorevole · azzurro operativo · bianco · grigi calibrati
══════════════════════════════════════════════════════════ */
:root {
  /* ── Primitive: blu ───────────────────────────────────── */
  --navy-950:#061426; --navy-900:#0A1F3C; --navy-800:#10305C;
  --navy-700:#16437F; --navy-600:#1D5AA8;
  --blue-500:#2E7DD7; --blue-400:#5199E3; --blue-300:#8CBCF0;
  --blue-200:#BBD7F8; --blue-100:#DCEAFB; --blue-50:#F1F7FE;

  /* ── Primitive: neutri (contrasto verificato su bianco) ── */
  --ink-900:#0C1B2E;  /* 16.4:1 */
  --ink-700:#28405C;  /* 10.1:1 */
  --ink-600:#3B5878;  /*  7.3:1 */
  --ink-500:#587391;  /*  4.7:1  — minimo per testo normale */
  --ink-300:#A9BCD1;  /* solo bordi/decoro, mai testo */
  --paper:#FFFFFF; --paper-2:#F7FAFD; --paper-3:#EEF4FB;
  --line:#DFE9F4; --line-strong:#C6D8EC;

  /* ── Semantici ─────────────────────────────────────────── */
  --bg:var(--paper); --bg-alt:var(--paper-2); --bg-sunken:var(--paper-3);
  --fg:var(--ink-900); --fg-2:var(--ink-600); --fg-3:var(--ink-500);
  --primary:var(--navy-700); --primary-hover:var(--navy-800);
  --on-primary:#FFFFFF;
  --accent:var(--blue-500);        /* solo superfici/decoro: 4.17:1 su bianco */
  --accent-text:#1B63B0;           /* azzurro leggibile come TESTO: 6.07:1 su bianco */
  --accent-soft:var(--blue-100);
  --ring:var(--blue-500);
  --danger:#C0332F; --danger-bg:#FDF0EF;
  --warn:#B45309;  --warn-bg:#FDF5EA;
  --ok:#1A7A5E;    --ok-bg:#EDF8F4;

  /* ── Su fondo navy ─────────────────────────────────────── */
  --on-dark:#FFFFFF; --on-dark-2:rgba(233,241,250,.80); --on-dark-3:rgba(214,229,246,.62);
  --on-dark-line:rgba(255,255,255,.14);

  /* ── Tipografia ────────────────────────────────────────── */
  --f-display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --f-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --fs-micro:.8125rem;  /* 13 */
  --fs-label:.875rem;   /* 14 */
  --fs-sm:.9688rem;     /* 15.5 */
  --fs-base:1.0625rem;  /* 17 — base leggibile */
  --fs-lg:1.1875rem;    /* 19 */
  --fs-xl:1.375rem;     /* 22 */
  --fs-2xl:clamp(1.5rem,1.1rem + 1.4vw,1.9375rem);
  --fs-3xl:clamp(1.875rem,1.3rem + 2.4vw,2.75rem);
  --fs-4xl:clamp(2.375rem,1.4rem + 4.2vw,4.25rem);

  /* ── Spazio (density 4/10 — standard) ──────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* ── Forma & profondità ────────────────────────────────── */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-full:999px;
  --sh-1:0 1px 2px rgba(12,27,46,.05), 0 1px 3px rgba(12,27,46,.05);
  --sh-2:0 2px 4px rgba(12,27,46,.04), 0 10px 24px -8px rgba(12,27,46,.12);
  --sh-3:0 4px 10px rgba(12,27,46,.05), 0 24px 50px -14px rgba(12,27,46,.18);
  --sh-4:0 40px 90px -24px rgba(6,20,38,.45), 0 8px 24px -8px rgba(6,20,38,.30);
  --sh-ring:0 0 0 4px rgba(46,125,215,.22);

  /* ── Motion ────────────────────────────────────────────── */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --t-fast:140ms; --t-base:240ms; --t-slow:420ms;

  /* ── Layer ─────────────────────────────────────────────── */
  --z-base:0; --z-raised:10; --z-nav:100; --z-drawer:200; --z-modal:400; --z-toast:600;
}

/* ══ Reset ═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-size:var(--fs-base);font-weight:400;
  line-height:1.65;letter-spacing:-.006em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--blue-200);color:var(--navy-900)}

/* Focus visibile ovunque — mai rimosso */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--ring);outline-offset:2px;border-radius:var(--r-sm);
}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:var(--z-toast);
  background:var(--navy-900);color:#fff;padding:12px 20px;border-radius:var(--r-sm);
  font-size:var(--fs-label);font-weight:600;transition:top var(--t-base) var(--e-out);
}
.skip-link:focus{top:var(--s-4)}

/* ══ Layout ══════════════════════════════════════════════ */
.container{width:100%;max-width:1200px;margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
.container-narrow{max-width:920px}
.section{padding-block:clamp(64px,9vw,var(--s-9))}
.section-sm{padding-block:clamp(48px,7vw,var(--s-8))}
.section-alt{background:var(--bg-alt);border-block:1px solid var(--line)}

/* ══ Tipografia utility ══════════════════════════════════ */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy-700);
  margin-bottom:var(--s-4);
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--accent);flex:none}
.eyebrow.on-dark{color:var(--blue-300)}
.eyebrow.on-dark::before{background:var(--blue-400)}

.display{
  font-family:var(--f-display);font-size:var(--fs-3xl);font-weight:600;
  line-height:1.08;letter-spacing:-.028em;color:var(--fg);
  text-wrap:balance;
}
.display em{font-style:normal;color:var(--navy-600)}
.display-xl{font-size:var(--fs-4xl)}

.lead{
  font-size:var(--fs-lg);line-height:1.6;color:var(--fg-2);
  max-width:56ch;text-wrap:pretty;
}
.prose p{font-size:var(--fs-base);line-height:1.72;color:var(--fg-2);max-width:66ch;margin-bottom:var(--s-4)}
.prose p strong{color:var(--fg);font-weight:600}
.mono-tag{
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.06em;color:var(--fg-3);
}

/* ══ Icone (SVG sprite, stroke 1.75) ═════════════════════ */
.ico{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;
     stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:18px;height:18px}
.ico-lg{width:28px;height:28px}

/* ══ Bottoni ═════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em;
  cursor:pointer;position:relative;
  /* Le etichette lunghe devono poter andare a capo: con nowrap
     sforavano la viewport a 375px. */
  white-space:normal;text-align:center;text-wrap:balance;max-width:100%;
  transition:background var(--t-base) var(--e-out),color var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out),
             transform var(--t-fast) var(--e-out);
}
.btn:active{transform:scale(.975)}
.btn .ico{width:19px;height:19px;transition:transform var(--t-base) var(--e-out)}
.btn:hover .ico-arrow{transform:translateX(3px)}

.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--sh-3)}

.btn-secondary{background:var(--paper);color:var(--navy-800);border:1.5px solid var(--line-strong)}
.btn-secondary:hover{border-color:var(--navy-600);background:var(--blue-50)}

.btn-light{background:#fff;color:var(--navy-800);box-shadow:0 8px 26px -8px rgba(0,0,0,.4)}
.btn-light:hover{background:var(--blue-50);box-shadow:0 12px 34px -8px rgba(0,0,0,.45)}

.btn-outline-light{border:1.5px solid rgba(255,255,255,.34);color:#fff}
.btn-outline-light:hover{border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.08)}

.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ══ Reveal on scroll ════════════════════════════════════ */
.reveal{transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out)}
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:80ms} .reveal-d2{transition-delay:160ms}
.reveal-d3{transition-delay:240ms} .reveal-d4{transition-delay:320ms}

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

/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
/* Deve restare agganciato a #site-nav: un selettore `nav` generico
   colpirebbe anche le briciole di pane e l'indice, che sono <nav>. */
#site-nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:background var(--t-base) var(--e-out),border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}
#site-nav.scrolled{background:rgba(255,255,255,.94);border-bottom-color:var(--line);box-shadow:0 1px 24px rgba(12,27,46,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);height:72px}

.nav-logo{
  display:inline-flex;align-items:center;gap:11px;min-height:44px;
  font-family:var(--f-display);font-size:1.375rem;font-weight:700;
  letter-spacing:-.03em;color:var(--navy-900);
}
.logo-mark{
  width:32px;height:32px;border-radius:9px;flex:none;position:relative;
  background:linear-gradient(140deg,var(--navy-700),var(--blue-500));
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(29,90,168,.35);
}
.logo-mark::after{content:"";width:10px;height:10px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{
  display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-full);
  font-size:var(--fs-label);font-weight:500;color:var(--fg-2);
  transition:color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out);
}
.nav-links a:hover{color:var(--navy-800);background:var(--blue-50)}
.nav-links a[aria-current="true"]{color:var(--navy-800);background:var(--blue-100)}

.nav-right{display:flex;align-items:center;gap:10px}
.nav-btn-ghost{
  padding:11px 18px;border-radius:var(--r-full);
  font-size:var(--fs-label);font-weight:600;color:var(--navy-800);
  transition:background var(--t-fast) var(--e-out);
}
.nav-btn-ghost:hover{background:var(--blue-50)}
.nav-btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:var(--r-full);
  background:var(--primary);color:#fff;
  font-size:var(--fs-label);font-weight:600;
  box-shadow:0 2px 10px rgba(22,67,127,.24);
  transition:background var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out);
}
.nav-btn-primary:hover{background:var(--primary-hover);box-shadow:0 6px 18px rgba(22,67,127,.32)}

/* Stato loggato */
.nav-user{display:flex;align-items:center;gap:12px}
.nav-user-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(26,122,94,.16);flex:none;animation:pulse 2.6s var(--e-io) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(26,122,94,.16)}50%{box-shadow:0 0 0 6px rgba(26,122,94,.05)}}
.nav-user-name{font-size:var(--fs-label);font-weight:600;color:var(--navy-900);
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-trial-badge{
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  padding:5px 11px;border-radius:var(--r-full);
  background:var(--blue-100);color:var(--navy-700);white-space:nowrap;
}
.nav-btn-logout{
  padding:10px 16px;border-radius:var(--r-full);border:1.5px solid var(--line-strong);
  font-size:var(--fs-label);font-weight:500;color:var(--fg-2);
  transition:border-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out);
}
.nav-btn-logout:hover{border-color:var(--danger);color:var(--danger)}

.nav-hamburger{
  display:none;width:48px;height:48px;border-radius:var(--r-md);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav-hamburger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--navy-800);
  transition:transform var(--t-base) var(--e-out),opacity var(--t-fast) var(--e-out)}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Drawer mobile */
.mobile-menu{
  position:fixed;inset:72px 0 auto 0;z-index:var(--z-drawer);
  background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-3);
  padding:var(--s-5) 0 var(--s-6);
  transform:translateY(-14px);opacity:0;visibility:hidden;
  transition:transform var(--t-base) var(--e-out),opacity var(--t-base) var(--e-out),visibility var(--t-base);
}
.mobile-menu.open{transform:none;opacity:1;visibility:visible}
.mobile-menu ul{list-style:none;padding-inline:clamp(20px,4vw,40px)}
.mobile-menu ul a{
  display:flex;align-items:center;min-height:56px;
  font-size:var(--fs-lg);font-weight:500;color:var(--navy-900);
  border-bottom:1px solid var(--line);
}
.mobile-menu-footer{display:flex;gap:10px;padding:var(--s-5) clamp(20px,4vw,40px) 0;flex-wrap:wrap}
.mobile-menu-footer > *{flex:1;justify-content:center;min-width:130px;text-align:center}

@media (max-width:960px){
  .nav-links{display:none}
  .nav-right{display:none}
  .nav-hamburger{display:flex}
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
#hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 78% 8%, #1B4E90 0%, transparent 58%),
    radial-gradient(90% 80% at 8% 92%, #123A6E 0%, transparent 60%),
    linear-gradient(168deg,#0C2549 0%,#0A1F3C 52%,#061426 100%);
  padding-top:calc(72px + clamp(48px,7vw,86px));
  padding-bottom:0;
  color:var(--on-dark);
}
.hero-grid-bg{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 20%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 20%,#000 20%,transparent 75%);
}
.hero-aurora{
  position:absolute;border-radius:50%;filter:blur(90px);z-index:-1;pointer-events:none;
  opacity:.42;will-change:transform;
}
.hero-aurora.a1{width:520px;height:520px;top:-160px;right:-60px;
  background:radial-gradient(circle,#2E7DD7,transparent 68%);animation:drift1 22s var(--e-io) infinite alternate}
.hero-aurora.a2{width:440px;height:440px;bottom:40px;left:-120px;
  background:radial-gradient(circle,#1D5AA8,transparent 70%);animation:drift2 26s var(--e-io) infinite alternate}
@keyframes drift1{to{transform:translate3d(-50px,60px,0) scale(1.14)}}
@keyframes drift2{to{transform:translate3d(70px,-40px,0) scale(1.1)}}

.hero-body{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(40px,5vw,72px);align-items:center;
  padding-bottom:clamp(56px,7vw,86px);
}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 12px;border-radius:var(--r-full);
  background:rgba(255,255,255,.09);border:1px solid var(--on-dark-line);
  backdrop-filter:blur(8px);
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.03em;color:var(--on-dark-2);margin-bottom:var(--s-5);
}
.live-dot{width:8px;height:8px;border-radius:50%;background:#4ADE9B;flex:none;
  box-shadow:0 0 0 0 rgba(74,222,155,.6);animation:live 2.2s var(--e-io) infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(74,222,155,0)}100%{box-shadow:0 0 0 0 rgba(74,222,155,0)}}

.hero-title{
  font-family:var(--f-display);font-size:var(--fs-4xl);font-weight:600;
  line-height:1.03;letter-spacing:-.035em;color:#fff;
  margin-bottom:var(--s-5);text-wrap:balance;
}
.hero-title em{font-style:normal;color:var(--blue-300);position:relative;white-space:nowrap}
.hero-title em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-400),rgba(140,188,240,.15));
  transform:scaleX(0);transform-origin:left;
  animation:underline 1s var(--e-out) .55s forwards;
}
@keyframes underline{to{transform:scaleX(1)}}

.hero-desc{font-size:var(--fs-lg);line-height:1.62;color:var(--on-dark-2);
  max-width:52ch;margin-bottom:var(--s-6);text-wrap:pretty}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:var(--s-5)}
.hero-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-size:var(--fs-label);color:var(--on-dark-3);
}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust .ico{width:16px;height:16px;color:var(--blue-300)}

/* ── Pannello digest ─────────────────────────────────────── */
.hero-panel{
  background:var(--paper);border-radius:var(--r-xl);
  box-shadow:var(--sh-4);overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.18);
}
/* Filo superiore statico: una firma discreta sul bordo del pannello,
   senza movimento. Sostituisce la vecchia linea di scansione animata. */
.panel-scan{
  position:absolute;left:0;right:0;top:0;height:3px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(46,125,215,0) 0%,
    var(--navy-600) 20%,
    var(--blue-400) 50%,
    var(--navy-600) 80%,
    rgba(46,125,215,0) 100%);
}

.panel-header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:18px 22px;background:var(--paper-2);border-bottom:1px solid var(--line);
}
.panel-title{font-family:var(--f-display);font-size:var(--fs-lg);font-weight:600;
  letter-spacing:-.02em;color:var(--navy-900)}
.panel-status{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  padding:5px 11px;border-radius:var(--r-full);background:var(--ok-bg);color:var(--ok);
}
.panel-status .live-dot{background:var(--ok);box-shadow:none;animation:none}

.panel-item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;
  padding:16px 22px;border-bottom:1px solid var(--line);
  transition:background var(--t-fast) var(--e-out);
}
.panel-item:hover{background:var(--blue-50)}
.prio{
  display:inline-flex;align-items:center;gap:6px;margin-top:3px;
  font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;
}
.prio i{width:8px;height:8px;border-radius:50%;flex:none}
.prio.alta{color:var(--danger)}      .prio.alta i{background:var(--danger)}
.prio.media{color:var(--accent-text)} .prio.media i{background:var(--accent)}
.prio.bassa{color:var(--fg-3)}       .prio.bassa i{background:var(--ink-300)}
.pi-title{font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--navy-900);
  letter-spacing:-.012em;margin-bottom:3px}
.pi-source{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--fg-3);letter-spacing:.01em}
.pi-date{font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;color:var(--fg-3);
  white-space:nowrap;margin-top:3px}

.panel-footer{
  display:flex;align-items:center;gap:10px;padding:14px 22px;
  background:var(--paper-2);
  font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--fg-3);
}
.panel-footer .ico{width:15px;height:15px;color:var(--navy-600)}
.panel-footer b{color:var(--navy-700);font-weight:500}

/* ── Barra statistiche ───────────────────────────────────── */
.hero-bar{border-top:1px solid var(--on-dark-line);background:rgba(0,0,0,.20);
  backdrop-filter:blur(6px)}
.hero-bar-inner{display:grid;grid-template-columns:repeat(4,1fr)}
.hero-stat{padding:26px 12px;text-align:center;border-right:1px solid var(--on-dark-line)}
.hero-stat:last-child{border-right:none}
.stat-number{font-family:var(--f-display);font-size:clamp(1.75rem,3vw,2.375rem);font-weight:600;
  letter-spacing:-.03em;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-label{font-size:var(--fs-label);color:var(--on-dark-3);line-height:1.35;margin-top:5px}

@media (max-width:900px){
  .hero-body{grid-template-columns:1fr;gap:var(--s-7)}
  .hero-desc{max-width:none}
}
@media (max-width:600px){
  .hero-bar-inner{grid-template-columns:repeat(2,1fr)}
  .hero-stat{border-bottom:1px solid var(--on-dark-line)}
  .hero-stat:nth-child(2n){border-right:none}
  .hero-stat:nth-last-child(-n+2){border-bottom:none}
}

/* ══════════════════════════════════════════════════════════
   FONTI — striscia di fiducia
══════════════════════════════════════════════════════════ */
.sources{padding-block:var(--s-6);background:var(--paper);border-bottom:1px solid var(--line)}
.sources-label{
  text-align:center;font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s-5);
}
.sources-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:12px clamp(16px,3vw,36px);
}
.source-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--paper-2);
  font-size:var(--fs-label);font-weight:500;color:var(--fg-2);
  transition:border-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out),
             background var(--t-fast) var(--e-out);
}
.source-chip:hover{border-color:var(--blue-300);color:var(--navy-800);background:var(--blue-50)}
.source-chip .ico{width:17px;height:17px;color:var(--navy-600)}

/* ══════════════════════════════════════════════════════════
   HEADER DI SEZIONE (2 colonne)
══════════════════════════════════════════════════════════ */
.sec-head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,var(--s-7));align-items:end;margin-bottom:var(--s-7);
}
@media (max-width:840px){.sec-head{grid-template-columns:1fr;gap:var(--s-4);align-items:start}}

/* ══════════════════════════════════════════════════════════
   TIMELINE — la mattina di Normia
══════════════════════════════════════════════════════════ */
.timeline{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s-4);margin-bottom:var(--s-7);
  padding:var(--s-6) clamp(20px,3vw,var(--s-6));
  background:linear-gradient(135deg,var(--blue-50),var(--paper));
  border:1px solid var(--line);border-radius:var(--r-xl);
}
.timeline::before{
  content:"";position:absolute;left:clamp(20px,3vw,32px);right:clamp(20px,3vw,32px);
  top:calc(var(--s-6) + 21px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-200),var(--blue-400),var(--blue-200));
}
.tl-step{position:relative;padding-top:0}
.tl-node{
  width:44px;height:44px;border-radius:50%;position:relative;z-index:1;
  background:var(--paper);border:2px solid var(--blue-300);
  display:grid;place-items:center;color:var(--navy-700);margin-bottom:14px;
  box-shadow:0 0 0 6px var(--paper);
}
.tl-step:last-child .tl-node{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.tl-time{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:600;
  color:var(--navy-700);letter-spacing:.02em;margin-bottom:2px;font-variant-numeric:tabular-nums}
.tl-name{font-size:var(--fs-sm);font-weight:600;color:var(--navy-900);margin-bottom:4px;letter-spacing:-.012em}
.tl-desc{font-size:var(--fs-label);color:var(--fg-2);line-height:1.5}
@media (max-width:840px){
  .timeline{grid-template-columns:1fr 1fr}
  .timeline::before{display:none}
}
@media (max-width:520px){.timeline{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════
   STEPS — come funziona
══════════════════════════════════════════════════════════ */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:var(--s-4)}
.step{
  padding:var(--s-6) var(--s-5);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:border-color var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out),
             transform var(--t-base) var(--e-out);
}
.step::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--navy-700),var(--blue-400));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--e-out);
}
.step:hover{border-color:var(--blue-200);box-shadow:var(--sh-3);transform:translateY(-4px)}
.step:hover::after{transform:scaleX(1)}
.step-num{
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;
  color:var(--accent-text);margin-bottom:var(--s-4);
}
.step-icon{
  width:52px;height:52px;border-radius:14px;margin-bottom:var(--s-4);
  display:grid;place-items:center;color:var(--navy-700);
  background:var(--blue-50);border:1px solid var(--blue-100);
}
.step-title{font-family:var(--f-display);font-size:var(--fs-xl);font-weight:600;
  letter-spacing:-.022em;color:var(--navy-900);margin-bottom:10px;line-height:1.25}
.step-body{font-size:var(--fs-sm);line-height:1.62;color:var(--fg-2)}

/* ══════════════════════════════════════════════════════════
   FILTRO — dimostrazione interattiva
══════════════════════════════════════════════════════════ */
#filtro{
  background:
    radial-gradient(90% 70% at 85% 10%,#123A6E 0%,transparent 60%),
    linear-gradient(160deg,#0A1F3C,#061426);
  color:var(--on-dark);position:relative;overflow:hidden;
}
#filtro .display{color:#fff}
#filtro .display em{color:var(--blue-300)}
#filtro .lead{color:var(--on-dark-2)}

.filter-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,var(--s-7));align-items:start}

.filter-tabs{display:flex;flex-direction:column;gap:10px}
.ftab{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:18px 20px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1.5px solid var(--on-dark-line);
  color:var(--on-dark-2);min-height:44px;
  transition:background var(--t-base) var(--e-out),border-color var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out),transform var(--t-fast) var(--e-out);
}
.ftab:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);color:#fff}
.ftab:active{transform:scale(.985)}
.ftab[aria-selected="true"]{
  background:#fff;border-color:#fff;color:var(--navy-900);box-shadow:var(--sh-3);
}
.ftab-icon{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:inherit;transition:background var(--t-base) var(--e-out)}
.ftab[aria-selected="true"] .ftab-icon{background:var(--blue-100);color:var(--navy-700)}
.ftab-name{font-size:var(--fs-sm);font-weight:600;letter-spacing:-.012em;display:block}
.ftab-sub{font-family:var(--f-mono);font-size:var(--fs-micro);opacity:.72;display:block;margin-top:2px}

.filter-result{
  background:var(--paper);border-radius:var(--r-xl);box-shadow:var(--sh-4);
  overflow:hidden;color:var(--fg);
}
.fr-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;
  padding:20px 24px;border-bottom:1px solid var(--line);background:var(--paper-2);
}
.fr-count{font-family:var(--f-display);font-size:var(--fs-xl);font-weight:600;
  letter-spacing:-.022em;color:var(--navy-900)}
.fr-count b{color:var(--accent-text);font-variant-numeric:tabular-nums}
.fr-total{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--fg-3)}
.fr-list{min-height:296px}
.fr-item{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:18px 24px;border-bottom:1px solid var(--line);
  animation:frIn var(--t-slow) var(--e-out) backwards;
}
.fr-item:nth-child(1){animation-delay:0ms}
.fr-item:nth-child(2){animation-delay:60ms}
.fr-item:nth-child(3){animation-delay:120ms}
@keyframes frIn{from{opacity:0;transform:translateY(10px)}}
.fr-item-title{font-size:var(--fs-sm);font-weight:600;color:var(--navy-900);
  line-height:1.42;letter-spacing:-.012em;margin-bottom:4px}
.fr-item-why{font-size:var(--fs-label);color:var(--fg-2);line-height:1.5}
.fr-item-why b{color:var(--navy-700);font-weight:600}
.fr-foot{padding:16px 24px;background:var(--paper-2);
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--fg-3)}
.fr-foot .ico{width:15px;height:15px;color:var(--ok)}
@media (max-width:880px){
  .filter-wrap{grid-template-columns:1fr}
  .filter-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .ftab{min-width:210px;flex:none}
  .fr-list{min-height:0}
}

/* ══════════════════════════════════════════════════════════
   CHI SIAMO
══════════════════════════════════════════════════════════ */
.chisiamo-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,var(--s-8));align-items:start}
.sede-tag{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--s-5);
  padding:11px 18px;border-radius:var(--r-full);
  background:var(--blue-50);border:1px solid var(--blue-100);
  font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--navy-700);
}
.sede-tag .ico{width:16px;height:16px}

.team-list{display:flex;flex-direction:column;gap:2px}
.team-member{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:var(--s-4);border-radius:var(--r-md);
  transition:background var(--t-fast) var(--e-out);
}
.team-member:hover{background:var(--paper-2)}
.avatar{
  width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;
  font-family:var(--f-display);font-size:var(--fs-lg);font-weight:700;color:#fff;
  background:linear-gradient(140deg,var(--navy-700),var(--blue-500));
}
.member-name{font-size:var(--fs-base);font-weight:600;color:var(--navy-900);letter-spacing:-.014em}
.member-role{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--accent-text);
  letter-spacing:.03em;margin-bottom:5px}
.member-bio{font-size:var(--fs-label);color:var(--fg-2);line-height:1.55}
@media (max-width:840px){.chisiamo-layout{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════════════════ */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--s-5);align-items:start}
.plan{
  padding:var(--s-6);border-radius:var(--r-xl);
  background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;position:relative;
  transition:box-shadow var(--t-base) var(--e-out),border-color var(--t-base) var(--e-out)}
.plan:hover{box-shadow:var(--sh-2);border-color:var(--blue-200)}
.plan.featured{
  background:linear-gradient(168deg,#0C2549,#0A1F3C 60%,#061426);
  border-color:var(--navy-800);color:var(--on-dark);box-shadow:var(--sh-3);
}
.plan.featured:hover{box-shadow:var(--sh-4)}
.plan-badge{
  position:absolute;top:-14px;left:var(--s-6);
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:var(--r-full);
  background:var(--accent-text);color:#fff;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;
  box-shadow:0 4px 14px rgba(27,99,176,.45);
}
.plan-name{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s-4)}
.plan.featured .plan-name{color:var(--blue-300)}
.plan-price{
  font-family:var(--f-display);font-size:clamp(2.5rem,5vw,3.25rem);font-weight:600;
  letter-spacing:-.04em;line-height:1;color:var(--navy-900);
  display:flex;align-items:baseline;gap:3px;flex-wrap:wrap;
}
.plan.featured .plan-price{color:#fff}
.plan-price .currency{font-size:.5em;font-weight:500;align-self:flex-start;margin-top:.35em}
.plan-price .period{font-family:var(--f-body);font-size:var(--fs-base);font-weight:400;
  color:var(--fg-3);letter-spacing:-.01em;margin-left:6px}
.plan.featured .plan-price .period{color:var(--on-dark-3)}
.plan-note{font-size:var(--fs-label);color:var(--fg-2);margin-top:10px}
.plan.featured .plan-note{color:var(--on-dark-2)}
.plan-divider{height:1px;background:var(--line);margin-block:var(--s-5)}
.plan.featured .plan-divider{background:var(--on-dark-line)}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:13px;
  margin-bottom:var(--s-6);flex:1}
.plan-features li{display:grid;grid-template-columns:auto 1fr;gap:11px;
  font-size:var(--fs-sm);line-height:1.5;color:var(--fg-2)}
.plan.featured .plan-features li{color:var(--on-dark-2)}
.plan-features .ico{width:19px;height:19px;color:var(--ok);margin-top:2px}
.plan.featured .plan-features .ico{color:#4ADE9B}

.pricing-note{
  margin-top:var(--s-5);text-align:center;
  font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--fg-3);letter-spacing:.02em;
}

/* ══════════════════════════════════════════════════════════
   SICUREZZA
══════════════════════════════════════════════════════════ */
.security-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--s-4)}
.sec-item{
  padding:var(--s-5);border-radius:var(--r-lg);background:var(--paper);
  border:1px solid var(--line);
  transition:border-color var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out)}
.sec-item:hover{border-color:var(--blue-200);box-shadow:var(--sh-2)}
.sec-icon{
  width:46px;height:46px;border-radius:13px;margin-bottom:var(--s-4);
  display:grid;place-items:center;color:var(--navy-700);
  background:var(--blue-50);border:1px solid var(--blue-100);
}
.sec-title{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.018em;
  color:var(--navy-900);margin-bottom:7px}
.sec-desc{font-size:var(--fs-sm);line-height:1.6;color:var(--fg-2)}

/* ══════════════════════════════════════════════════════════
   REGISTRAZIONE
══════════════════════════════════════════════════════════ */
.register-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4vw,var(--s-7));align-items:start}
@media (max-width:920px){.register-layout{grid-template-columns:1fr}}

.perk-list{list-style:none;display:flex;flex-direction:column;gap:var(--s-4);margin-bottom:var(--s-5)}
.perk-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  font-size:var(--fs-sm);line-height:1.55;color:var(--fg-2)}
.perk-list .mark{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:600;
  background:var(--navy-700);color:#fff;
}
.info-box{
  padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--blue-50);border:1px solid var(--blue-100);
  border-left:4px solid var(--accent);
}
.info-box p{font-size:var(--fs-sm);line-height:1.6;color:var(--fg-2);margin:0}
.info-box strong{color:var(--navy-900);font-weight:600}

.form-card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden}
.form-card-header{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:22px 26px;background:linear-gradient(140deg,var(--navy-800),var(--navy-900));color:#fff;
}
.form-card-title{font-family:var(--f-display);font-size:var(--fs-xl);font-weight:600;letter-spacing:-.022em}
.form-card-badge{
  padding:6px 14px;border-radius:var(--r-full);background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;white-space:nowrap;
}
.form-body{padding:var(--s-6) clamp(20px,3vw,26px)}

.form-sep{display:flex;align-items:center;gap:14px;margin:var(--s-5) 0 var(--s-4)}
.form-sep:first-child{margin-top:0}
.form-sep-line{flex:1;height:1px;background:var(--line)}
.form-sep-text{
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;
}

.field{margin-bottom:var(--s-4)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}
.field label{
  display:block;font-size:var(--fs-label);font-weight:600;
  color:var(--ink-700);margin-bottom:7px;letter-spacing:-.008em;
}
.field .req{color:var(--danger);margin-left:2px}
.field input,.field select{
  width:100%;min-height:52px;padding:13px 16px;
  border-radius:var(--r-md);border:1.5px solid var(--line-strong);
  background:var(--paper);color:var(--fg);font-size:var(--fs-base);
  transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out),
             background var(--t-fast) var(--e-out);
}
.field input::placeholder{color:var(--ink-500);opacity:1}
.field input:hover,.field select:hover{border-color:var(--blue-300)}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--sh-ring);background:#fff;
}
.field select{
  appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%233B5878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.field-mono input{font-family:var(--f-mono);letter-spacing:.02em}
.field-hint{font-size:var(--fs-micro);color:var(--fg-3);margin-top:6px;line-height:1.45}
.field-error{
  display:none;align-items:center;gap:7px;margin-top:7px;
  font-size:var(--fs-micro);font-weight:500;color:var(--danger);
}
.field-error .ico{width:15px;height:15px}
.field.has-error input,.field.has-error select{border-color:var(--danger);background:var(--danger-bg)}
.field.has-error .field-error{display:flex}

.pwd-wrap{position:relative}
.pwd-wrap input{padding-right:52px}
.pwd-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-sm);
  color:var(--fg-3);transition:color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out);
}
.pwd-eye:hover{color:var(--navy-700);background:var(--paper-3)}

.canale-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:420px){.canale-grid{grid-template-columns:1fr}}
.canale-opt input{position:absolute;opacity:0;width:0;height:0}
.canale-opt label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-height:96px;padding:16px 10px;border-radius:var(--r-md);cursor:pointer;
  border:1.5px solid var(--line-strong);background:var(--paper);
  transition:border-color var(--t-base) var(--e-out),background var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out),transform var(--t-fast) var(--e-out);
}
.canale-opt label:hover{border-color:var(--blue-300);background:var(--blue-50)}
.canale-opt label:active{transform:scale(.98)}
.canale-opt .ico{width:26px;height:26px;color:var(--fg-3);transition:color var(--t-base) var(--e-out)}
.canale-name{font-size:var(--fs-label);font-weight:600;color:var(--fg-2);letter-spacing:-.01em}
.canale-opt input:checked + label{
  border-color:var(--navy-700);background:var(--blue-50);box-shadow:var(--sh-ring);
}
.canale-opt input:checked + label .ico,
.canale-opt input:checked + label .canale-name{color:var(--navy-800)}
.canale-opt input:focus-visible + label{outline:3px solid var(--ring);outline-offset:2px}

.tfa-notice{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:var(--s-4);border-radius:var(--r-md);margin-block:var(--s-5) var(--s-4);
  background:var(--blue-50);border:1px solid var(--blue-100);
}
.tfa-notice .ico{color:var(--navy-700);margin-top:1px}
.tfa-notice p{font-size:var(--fs-label);line-height:1.55;color:var(--fg-2);margin:0}
.tfa-notice strong{color:var(--navy-900);font-weight:600}

.check-field{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-bottom:var(--s-3)}
.check-field input[type=checkbox]{
  width:22px;height:22px;margin-top:1px;flex:none;cursor:pointer;accent-color:var(--navy-700);
}
.check-field label{font-size:var(--fs-label);line-height:1.55;color:var(--fg-2);cursor:pointer}
.check-field a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.check-field a:hover{color:var(--accent-text)}

.btn-register{
  width:100%;min-height:58px;margin-top:var(--s-5);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--r-full);background:var(--primary);color:#fff;
  font-size:var(--fs-base);font-weight:600;letter-spacing:-.012em;
  box-shadow:var(--sh-2);
  transition:background var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out),
             transform var(--t-fast) var(--e-out);
}
.btn-register:hover:not(:disabled){background:var(--primary-hover);box-shadow:var(--sh-3)}
.btn-register:active:not(:disabled){transform:scale(.985)}
.btn-register:disabled{opacity:.6;cursor:not-allowed}
.btn-register .ico-arrow{transition:transform var(--t-base) var(--e-out)}
.btn-register:hover:not(:disabled) .ico-arrow{transform:translateX(3px)}

.spinner{
  width:19px;height:19px;border-radius:50%;flex:none;
  border:2.2px solid rgba(255,255,255,.32);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.login-link{text-align:center;margin-top:var(--s-4);font-size:var(--fs-label);color:var(--fg-2)}
.login-link a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.login-link a:hover{color:var(--accent-text)}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
footer{
  background:linear-gradient(168deg,#0A1F3C,#061426);color:var(--on-dark);
  padding-block:var(--s-8) var(--s-6);
}
.footer-main{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,var(--s-7));padding-bottom:var(--s-7);
  border-bottom:1px solid var(--on-dark-line);
}
@media (max-width:840px){.footer-main{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-main{grid-template-columns:1fr}}
.footer-logo{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:var(--s-4);
  font-family:var(--f-display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:#fff;
}
.footer-tagline{font-size:var(--fs-sm);line-height:1.6;color:var(--on-dark-2);max-width:38ch;margin-bottom:var(--s-4)}
.footer-address{font-family:var(--f-mono);font-size:var(--fs-micro);line-height:1.8;color:var(--on-dark-3)}
.footer-address a:hover{color:var(--blue-300)}
.footer-col h4{
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue-300);margin-bottom:var(--s-4);
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:var(--fs-sm);color:var(--on-dark-2);
  transition:color var(--t-fast) var(--e-out)}
.footer-col a:hover{color:#fff}
.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding-top:var(--s-5);
}
.footer-copy{font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--on-dark-3)}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.footer-legal a{font-size:var(--fs-micro);font-family:var(--f-mono);color:var(--on-dark-3)}
.footer-legal a:hover{color:#fff}

/* ══════════════════════════════════════════════════════════
   COOKIE BAR
══════════════════════════════════════════════════════════ */
#cookie-bar{
  position:fixed;left:var(--s-4);right:var(--s-4);
  bottom:max(var(--s-4),env(safe-area-inset-bottom));
  z-index:var(--z-modal);max-width:900px;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:18px 22px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  border:1px solid var(--line);box-shadow:var(--sh-3);
  animation:cookieUp var(--t-slow) var(--e-out) .9s backwards;
}
@keyframes cookieUp{from{opacity:0;transform:translateY(24px)}}
#cookie-bar p{font-size:var(--fs-label);line-height:1.55;color:var(--fg-2);flex:1;min-width:250px}
#cookie-bar a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn-ck{
  min-height:44px;padding:11px 20px;border-radius:var(--r-full);
  font-size:var(--fs-label);font-weight:600;white-space:nowrap;
  transition:all var(--t-fast) var(--e-out);
}
.btn-ck.decline{border:1.5px solid var(--line-strong);color:var(--fg-2)}
.btn-ck.decline:hover{border-color:var(--navy-600);color:var(--navy-800)}
.btn-ck.accept{background:var(--primary);color:#fff}
.btn-ck.accept:hover{background:var(--primary-hover)}

/* ══════════════════════════════════════════════════════════
   MODALI
══════════════════════════════════════════════════════════ */
.modal-bg,.legal-bg{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:var(--s-4);
  background:rgba(6,20,38,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--e-out),visibility var(--t-base);
}
.modal-bg.open,.legal-bg.open{opacity:1;visibility:visible}

.modal-box{
  width:100%;max-width:460px;background:var(--paper);
  border-radius:var(--r-xl);box-shadow:var(--sh-4);overflow:hidden;
  transform:translateY(18px) scale(.97);
  transition:transform var(--t-base) var(--e-out);
}
.modal-bg.open .modal-box{transform:none}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:20px 24px;border-bottom:1px solid var(--line);background:var(--paper-2);
}
.modal-head-title{font-family:var(--f-display);font-size:var(--fs-xl);font-weight:600;
  letter-spacing:-.022em;color:var(--navy-900)}
.modal-close-btn{
  width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--fg-3);transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out);
}
.modal-close-btn:hover{background:var(--paper-3);color:var(--navy-900)}
.modal-content{padding:var(--s-6) 24px}
.modal-step{display:none}
.modal-step.active{display:block;animation:frIn var(--t-base) var(--e-out)}
.modal-subtitle{font-size:var(--fs-sm);line-height:1.6;color:var(--fg-2);margin-bottom:var(--s-5)}
.modal-subtitle strong{color:var(--navy-900);font-weight:600}
.btn-modal-action{
  width:100%;min-height:54px;margin-top:var(--s-4);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--r-full);background:var(--primary);color:#fff;
  font-size:var(--fs-sm);font-weight:600;box-shadow:var(--sh-2);
  transition:background var(--t-base) var(--e-out),transform var(--t-fast) var(--e-out);
}
.btn-modal-action:hover:not(:disabled){background:var(--primary-hover)}
.btn-modal-action:active:not(:disabled){transform:scale(.985)}
.btn-modal-action:disabled{opacity:.6;cursor:not-allowed}
.modal-foot-note{text-align:center;margin-top:var(--s-4);font-size:var(--fs-label);color:var(--fg-2)}
.modal-foot-note a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.otp-wrap{display:flex;gap:9px;justify-content:center;margin-bottom:var(--s-5)}
.otp-digit{
  width:52px;height:64px;text-align:center;
  font-family:var(--f-mono);font-size:1.5rem;font-weight:600;
  border-radius:var(--r-md);border:1.5px solid var(--line-strong);background:var(--paper-2);
  color:var(--navy-900);
  transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out),
             background var(--t-fast) var(--e-out);
}
.otp-digit:focus{outline:none;border-color:var(--accent);box-shadow:var(--sh-ring);background:#fff}
@media (max-width:420px){.otp-digit{width:44px;height:56px;font-size:1.25rem}.otp-wrap{gap:6px}}

/* Documenti legali */
.legal-doc{
  width:100%;max-width:760px;max-height:88vh;background:var(--paper);
  border-radius:var(--r-xl);box-shadow:var(--sh-4);display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(18px) scale(.98);transition:transform var(--t-base) var(--e-out);
}
.legal-bg.open .legal-doc{transform:none}
.legal-doc-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:20px 26px;border-bottom:1px solid var(--line);background:var(--paper-2);flex:none;
}
.legal-doc-head h2{font-family:var(--f-display);font-size:var(--fs-xl);font-weight:600;
  letter-spacing:-.022em;color:var(--navy-900)}
.legal-close{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
  border-radius:var(--r-full);border:1.5px solid var(--line-strong);
  font-size:var(--fs-label);font-weight:600;color:var(--fg-2);
  transition:all var(--t-fast) var(--e-out);
}
.legal-close:hover{border-color:var(--navy-600);color:var(--navy-900);background:var(--paper-3)}
.legal-doc-body{padding:var(--s-6) 26px;overflow-y:auto;overscroll-behavior:contain}
.doc-date{
  font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--fg-3);
  padding-bottom:var(--s-4);margin-bottom:var(--s-5);border-bottom:1px solid var(--line);
}
.legal-doc-body h3{
  font-family:var(--f-display);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em;
  color:var(--navy-900);margin:var(--s-5) 0 10px;
}
.legal-doc-body h3:first-of-type{margin-top:0}
.legal-doc-body p{font-size:var(--fs-sm);line-height:1.7;color:var(--fg-2);margin-bottom:10px}
.legal-doc-body ul{padding-left:22px;margin-bottom:10px}
.legal-doc-body li{font-size:var(--fs-sm);line-height:1.7;color:var(--fg-2);margin-bottom:6px}
.legal-doc-body code{
  font-family:var(--f-mono);font-size:.92em;padding:2px 7px;border-radius:5px;
  background:var(--blue-50);color:var(--navy-700);border:1px solid var(--blue-100);
}

/* ══════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════ */
#toast-region{
  position:fixed;z-index:var(--z-toast);
  top:max(var(--s-4),env(safe-area-inset-top));right:var(--s-4);left:var(--s-4);
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;
}
@media (min-width:640px){#toast-region{left:auto;align-items:flex-end;max-width:440px}}
.toast{
  pointer-events:auto;width:100%;max-width:440px;
  display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:start;
  padding:16px 18px;border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-3);
  animation:toastIn var(--t-base) var(--e-out);
}
.toast.leaving{animation:toastOut 160ms var(--e-io) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.97)}}
.toast-ico{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none}
.toast-ico .ico{width:15px;height:15px}
.toast.error   .toast-ico{background:var(--danger-bg);color:var(--danger)}
.toast.success .toast-ico{background:var(--ok-bg);color:var(--ok)}
.toast.info    .toast-ico{background:var(--blue-100);color:var(--navy-700)}
.toast-body{font-size:var(--fs-label);line-height:1.55;color:var(--fg-2)}
.toast-body b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--navy-900);margin-bottom:2px}
.toast-close{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--fg-3)}
.toast-close:hover{background:var(--paper-3);color:var(--navy-900)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════
   PAGINE INTERNE — componenti condivisi
══════════════════════════════════════════════════════════ */

/* ── Testata di pagina ─────────────────────────────────── */
.page-hero{
  position:relative;overflow:hidden;isolation:isolate;color:var(--on-dark);
  background:
    radial-gradient(110% 85% at 80% 0%, #1B4E90 0%, transparent 58%),
    linear-gradient(165deg,#0C2549 0%,#0A1F3C 55%,#061426 100%);
  padding-top:calc(72px + clamp(40px,6vw,72px));
  padding-bottom:clamp(48px,6vw,80px);
}
.page-hero .hero-grid-bg{
  mask-image:radial-gradient(110% 100% at 50% 0%,#000 15%,transparent 78%);
  -webkit-mask-image:radial-gradient(110% 100% at 50% 0%,#000 15%,transparent 78%);
}
.page-hero-inner{max-width:820px}
.page-hero h1{
  font-family:var(--f-display);font-size:var(--fs-4xl);font-weight:600;
  line-height:1.05;letter-spacing:-.034em;color:#fff;
  margin-bottom:var(--s-5);text-wrap:balance;
}
.page-hero h1 em{font-style:normal;color:var(--blue-300)}
.page-hero .page-lead{
  font-size:var(--fs-lg);line-height:1.62;color:var(--on-dark-2);
  max-width:60ch;text-wrap:pretty;
}

/* Briciole di pane */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--s-4);
  font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--on-dark-3);
}
.crumbs a{color:var(--blue-300)}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--on-dark-2)}

/* ── Sommario laterale ─────────────────────────────────── */
.doc-layout{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(28px,4vw,var(--s-8));align-items:start;
}
.toc{position:sticky;top:96px}
.toc-title{
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);
  padding-bottom:var(--s-3);margin-bottom:var(--s-3);border-bottom:1px solid var(--line);
}
.toc ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc a{
  display:flex;align-items:center;min-height:44px;padding:0 12px;
  border-radius:var(--r-sm);border-left:2px solid transparent;
  font-size:var(--fs-label);font-weight:500;color:var(--fg-2);line-height:1.35;
  transition:color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out),
             border-color var(--t-fast) var(--e-out);
}
.toc a:hover{color:var(--navy-800);background:var(--blue-50);border-left-color:var(--blue-300)}
@media (max-width:900px){
  /* minmax(0,1fr) e non 1fr: con min-width auto la colonna si allargava
     al contenuto dei chip invece di lasciarli andare a capo. */
  .doc-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;margin-bottom:var(--s-5);min-width:0}
  .toc ul{flex-direction:row;flex-wrap:wrap;gap:8px;min-width:0}
  .toc li{min-width:0;max-width:100%}
  .toc a{
    border:1px solid var(--line);border-left-width:1px;border-radius:var(--r-full);
    padding:10px 16px;max-width:100%;
  }
}

/* ── Blocchi di testo lungo ────────────────────────────── */
.doc-section{margin-bottom:clamp(40px,5vw,var(--s-8));scroll-margin-top:96px}
.doc-section > h2{
  font-family:var(--f-display);font-size:var(--fs-2xl);font-weight:600;
  letter-spacing:-.026em;color:var(--navy-900);line-height:1.18;
  margin-bottom:var(--s-4);text-wrap:balance;
}
.doc-section > h3{
  font-family:var(--f-display);font-size:var(--fs-xl);font-weight:600;
  letter-spacing:-.022em;color:var(--navy-900);
  margin:var(--s-6) 0 var(--s-3);
}
.doc-section p{font-size:var(--fs-base);line-height:1.72;color:var(--fg-2);
  max-width:68ch;margin-bottom:var(--s-4);text-wrap:pretty}
.doc-section p strong{color:var(--navy-900);font-weight:600}
.doc-section > ul,.doc-section > ol{max-width:68ch;padding-left:24px;margin-bottom:var(--s-4)}
.doc-section > ul li,.doc-section > ol li{
  font-size:var(--fs-base);line-height:1.7;color:var(--fg-2);margin-bottom:10px;
}
.doc-section li::marker{color:var(--accent-text)}

/* ── Elenco con icona ──────────────────────────────────── */
.tick-list{list-style:none;display:flex;flex-direction:column;gap:14px;
  max-width:68ch;margin-bottom:var(--s-5);padding-left:0}
.tick-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;
  font-size:var(--fs-base);line-height:1.62;color:var(--fg-2)}
.tick-list .ico{width:21px;height:21px;color:var(--ok);margin-top:3px}
.tick-list.cross .ico{color:var(--fg-3)}
.tick-list b{color:var(--navy-900);font-weight:600}

/* ── Riquadri informativi ──────────────────────────────── */
.callout{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:var(--s-5);border-radius:var(--r-lg);margin-bottom:var(--s-5);
  max-width:68ch;
  background:var(--blue-50);border:1px solid var(--blue-100);border-left:4px solid var(--accent);
}
.callout .ico{color:var(--navy-700);margin-top:2px}
.callout p{font-size:var(--fs-sm);line-height:1.65;color:var(--fg-2);margin:0;max-width:none}
.callout p + p{margin-top:10px}
.callout strong{color:var(--navy-900);font-weight:600}
.callout.warn{background:var(--warn-bg);border-color:#F0DFC2;border-left-color:var(--warn)}
.callout.warn .ico{color:var(--warn)}
.callout-title{display:block;font-size:var(--fs-base);font-weight:600;
  color:var(--navy-900);margin-bottom:6px}

/* ── Tabella comparativa ───────────────────────────────── */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  margin-bottom:var(--s-5);-webkit-overflow-scrolling:touch}
.cmp-table{width:100%;border-collapse:collapse;min-width:560px}
.cmp-table th,.cmp-table td{
  padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);line-height:1.5;
}
.cmp-table thead th{
  background:var(--paper-2);color:var(--navy-900);font-weight:600;
  font-size:var(--fs-label);letter-spacing:-.008em;white-space:nowrap;
}
.cmp-table tbody th{color:var(--fg-2);font-weight:500}
.cmp-table td{color:var(--fg-2);font-variant-numeric:tabular-nums}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table tbody tr:hover{background:var(--blue-50)}
.cmp-table .yes{color:var(--ok);font-weight:600}
.cmp-table .no{color:var(--fg-3)}
.cmp-table .ico{width:19px;height:19px;display:inline-block;vertical-align:-4px}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{max-width:68ch}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:64px;padding:18px 0;text-align:left;
  font-size:var(--fs-lg);font-weight:600;letter-spacing:-.016em;color:var(--navy-900);
  transition:color var(--t-fast) var(--e-out);
}
.faq-q:hover{color:var(--accent-text)}
.faq-chevron{
  width:24px;height:24px;flex:none;color:var(--fg-3);
  transition:transform var(--t-base) var(--e-out),color var(--t-base) var(--e-out);
}
.faq-item.open .faq-chevron{transform:rotate(180deg);color:var(--accent-text)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-base) var(--e-out)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{font-size:var(--fs-sm);line-height:1.7;color:var(--fg-2);padding-bottom:20px;margin:0}
.faq-a p + p{padding-top:12px}

/* ── Griglia di schede ─────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:var(--s-4)}
.info-card{
  padding:var(--s-5);border-radius:var(--r-lg);background:var(--paper);
  border:1px solid var(--line);
  transition:border-color var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out);
}
.info-card:hover{border-color:var(--blue-200);box-shadow:var(--sh-2)}
.info-card .step-icon{margin-bottom:var(--s-4)}
.info-card h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.018em;
  color:var(--navy-900);margin-bottom:8px}
.info-card p{font-size:var(--fs-sm);line-height:1.6;color:var(--fg-2);margin:0}

/* ── Scheda fonte ──────────────────────────────────────── */
.source-card{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
}
.source-card + .source-card{margin-top:var(--s-3)}
.source-card .step-icon{margin-bottom:0;width:46px;height:46px}
.source-card h3{font-size:var(--fs-lg);font-weight:600;color:var(--navy-900);
  letter-spacing:-.018em;margin-bottom:5px}
.source-card p{font-size:var(--fs-sm);line-height:1.6;color:var(--fg-2);margin:0;max-width:none}
.source-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-full);
  background:var(--blue-50);border:1px solid var(--blue-100);
  font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--navy-700);
}

/* ── Fascia CTA di chiusura ────────────────────────────── */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;color:var(--on-dark);
  background:
    radial-gradient(90% 120% at 85% 20%, #1B4E90 0%, transparent 60%),
    linear-gradient(160deg,#0C2549,#061426);
  padding-block:clamp(56px,7vw,var(--s-9));text-align:center;
}
.cta-band h2{
  font-family:var(--f-display);font-size:var(--fs-3xl);font-weight:600;
  letter-spacing:-.03em;line-height:1.1;color:#fff;margin-bottom:var(--s-4);
  text-wrap:balance;
}
.cta-band p{font-size:var(--fs-lg);color:var(--on-dark-2);max-width:52ch;
  margin:0 auto var(--s-6);text-wrap:pretty}
.cta-band .hero-actions{justify-content:center}
.cta-band .hero-trust{justify-content:center}

/* ── Statistiche in linea ──────────────────────────────── */
.figure-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s-6);
}
.figure{background:var(--paper);padding:var(--s-5)}
.figure-num{
  font-family:var(--f-display);font-size:clamp(1.75rem,3vw,2.25rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.1;color:var(--navy-700);
  font-variant-numeric:tabular-nums;margin-bottom:6px;
}
.figure-label{font-size:var(--fs-label);line-height:1.45;color:var(--fg-2)}

/* ── Timeline verticale ────────────────────────────────── */
.vtimeline{position:relative;padding-left:38px;max-width:68ch}
.vtimeline::before{
  content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--blue-200),var(--blue-400),var(--blue-200));
}
.vt-step{position:relative;padding-bottom:var(--s-6)}
.vt-step:last-child{padding-bottom:0}
.vt-step::before{
  content:"";position:absolute;left:-32px;top:4px;width:28px;height:28px;border-radius:50%;
  background:var(--paper);border:2px solid var(--blue-300);box-shadow:0 0 0 5px var(--paper);
}
.vt-step::after{
  content:"";position:absolute;left:-24px;top:12px;width:12px;height:12px;border-radius:50%;
  background:var(--navy-700);
}
.vt-time{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:600;
  color:var(--accent-text);letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-bottom:3px}
.vt-title{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.018em;
  color:var(--navy-900);margin-bottom:6px}
.vt-body{font-size:var(--fs-sm);line-height:1.65;color:var(--fg-2)}

/* ── Esempio di messaggio ricevuto ─────────────────────── */
.msg-preview{
  max-width:520px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2);
}
.msg-head{
  display:flex;align-items:center;gap:11px;padding:14px 18px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.msg-head .ico{width:19px;height:19px;color:var(--navy-700)}
.msg-head b{font-size:var(--fs-sm);font-weight:600;color:var(--navy-900)}
.msg-head .mono-tag{margin-left:auto}
.msg-body{padding:18px}
.msg-body p{font-size:var(--fs-sm);line-height:1.65;color:var(--fg-2);margin:0 0 12px;max-width:none}
.msg-body p:last-child{margin-bottom:0}
.msg-body strong{color:var(--navy-900);font-weight:600}
.msg-rule{height:1px;background:var(--line);margin:14px 0}

@media (max-width:600px){
  .cmp-table th,.cmp-table td{padding:13px 15px}
  .vtimeline{padding-left:32px}
  .vt-step::before{left:-30px}
  .vt-step::after{left:-22px}
}

/* ── Rifiniture mobile ─────────────────────────────────── */
@media (max-width:900px){
  /* I link del footer diventano navigazione primaria sul telefono:
     servono target da 44px. */
  .footer-col a{display:flex;align-items:center;min-height:44px}
  .footer-col ul{gap:0}
  .footer-legal{gap:var(--s-3)}
  .footer-legal a{display:flex;align-items:center;min-height:44px;padding-inline:4px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .doc-section > h2{font-size:var(--fs-xl)}
  /* La tabella scorre nel suo contenitore: rendilo evidente */
  .table-wrap{position:relative}
}
@media (max-width:520px){
  .hero-actions .btn,.cta-band .hero-actions .btn{width:100%}
  .plan{padding:var(--s-5)}
}

/* ── Schermi molto stretti (320px) ─────────────────────── */
@media (max-width:360px){
  /* Il minimo del clamp a 38px sforava: sotto i 360px si scende a 32px,
     ancora ben leggibile ma contenuto nella viewport. */
  :root{--fs-4xl:2rem;--fs-3xl:1.625rem}
  .hero-badge{white-space:normal;line-height:1.4;text-align:left}
  .hero-title,.page-hero h1{hyphens:auto;-webkit-hyphens:auto}
  .container{padding-inline:16px}
  .stat-number{font-size:1.5rem}
  .otp-wrap{gap:5px}
  .otp-digit{width:40px;height:52px;font-size:1.125rem}
}

/* ── Categorie della pagina FAQ ────────────────────────── */
.doc-section > h2 .faq-cat-icon{
  display:inline-grid;place-items:center;vertical-align:-12px;
  width:46px;height:46px;border-radius:13px;margin-right:14px;
  background:var(--blue-50);border:1px solid var(--blue-100);color:var(--navy-700);
}
.faq-cat-count{
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  margin-bottom:var(--s-3);
}
@media (max-width:600px){
  .doc-section > h2 .faq-cat-icon{
    display:flex;width:40px;height:40px;margin:0 0 12px;vertical-align:baseline;
  }
  .doc-section > h2{display:flex;flex-direction:column;align-items:flex-start}
}

/* ══════════════════════════════════════════════════════════
   MOTION — interazioni col puntatore
   Tutto è attivo solo con puntatore fine (mouse) e viene
   disattivato da prefers-reduced-motion, in fondo al file.
══════════════════════════════════════════════════════════ */

/* ── La luce che segue il mouse nelle sezioni scure ────── */
.cursor-glow{
  position:fixed;top:0;left:0;z-index:1;pointer-events:none;
  width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(140,188,240,.20) 0%,
    rgba(90,150,225,.11) 38%,
    rgba(46,125,215,.05) 62%,
    transparent 100%);
  opacity:0;
  transition:opacity 620ms var(--e-out);
  will-change:transform,opacity;
  mix-blend-mode:screen;
}
.cursor-glow.on{opacity:1}
/* Il contenuto delle sezioni scure resta sopra alla luce */
#hero > .container,#hero .hero-bar,
.page-hero > .container,
.cta-band > .container,
#filtro > .container,
footer > .container{position:relative;z-index:2}

/* ── Bottoni magnetici ─────────────────────────────────── */
.btn,.btn-register,.btn-modal-action,.nav-btn-primary{
  --mx:0px; --my:0px; --bs:1;
  transform:translate3d(var(--mx),var(--my),0) scale(var(--bs));
}
.is-magnetic{
  transition:transform 380ms var(--e-out),
             background var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
  will-change:transform;
}
.btn:active,.btn-register:active:not(:disabled),
.btn-modal-action:active:not(:disabled){--bs:.97}
/* L'etichetta scivola un po' più del bottone: dà profondità */
.is-magnetic > *{
  transform:translate3d(calc(var(--mx) * .35),calc(var(--my) * .35),0);
  transition:transform 380ms var(--e-out);
}

/* ── Riflesso che segue il mouse dentro le schede ──────── */
.step,.info-card,.sec-item,.source-card,.plan,.hero-panel,.msg-preview{
  --px:50%; --py:50%;
  position:relative;
}
.step::before,.info-card::before,.sec-item::before,
.source-card::before,.plan:not(.featured)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;opacity:0;
  transition:opacity 420ms var(--e-out);
  background:radial-gradient(340px circle at var(--px) var(--py),
    rgba(46,125,215,.09) 0%, rgba(46,125,215,.03) 42%, transparent 72%);
}
.step:hover::before,.info-card:hover::before,.sec-item:hover::before,
.source-card:hover::before,.plan:not(.featured):hover::before{opacity:1}
/* Il contenuto resta sopra al riflesso */
.step > *,.info-card > *,.sec-item > *,.source-card > *,.plan > *{position:relative;z-index:1}

/* Sul piano scuro il riflesso è più chiaro */
.plan.featured::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;opacity:0;
  transition:opacity 420ms var(--e-out);
  background:radial-gradient(340px circle at var(--px) var(--py),
    rgba(140,188,240,.16) 0%, rgba(140,188,240,.05) 45%, transparent 72%);
}
.plan.featured:hover::before{opacity:1}

/* ── Barra di avanzamento della lettura ────────────────── */
.scroll-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(var(--p,0));transform-origin:left;
  background:linear-gradient(90deg,var(--navy-600),var(--blue-400));
  opacity:0;transition:opacity 300ms var(--e-out);
  pointer-events:none;
}
#site-nav.scrolled .scroll-progress{opacity:1}

/* ── Entrata scaglionata delle griglie ─────────────────── */
.js .reveal .step,
.js .reveal .info-card,
.js .reveal .sec-item,
.js .reveal .plan,
.js .reveal .source-card{
  opacity:0;transform:translateY(16px);
  transition:opacity 520ms var(--e-out),transform 520ms var(--e-out);
  transition-delay:calc(var(--i,0) * 55ms);
}
.js .reveal.in .step,
.js .reveal.in .info-card,
.js .reveal.in .sec-item,
.js .reveal.in .plan,
.js .reveal.in .source-card{opacity:1;transform:none}

/* ── Voci del pannello digest ──────────────────────────── */
.js .hero-panel .panel-item{
  opacity:0;transform:translateY(8px);
  animation:panelIn 560ms var(--e-out) forwards;
  animation-delay:calc(420ms + var(--i,0) * 90ms);
}
@keyframes panelIn{to{opacity:1;transform:none}}

/* ── Cifre che salgono ─────────────────────────────────── */
.stat-number,.figure-num{font-variant-numeric:tabular-nums}

/* ── Sottolineatura animata dei link di testo ──────────── */
.doc-section p a:not(.btn),.callout p a,.faq-a a{
  background-image:linear-gradient(var(--accent-text),var(--accent-text));
  background-size:0% 1.5px;background-repeat:no-repeat;
  background-position:left 88%;
  text-decoration:none;
  transition:background-size 320ms var(--e-out);
}
.doc-section p a:not(.btn):hover,.callout p a:hover,.faq-a a:hover{background-size:100% 1.5px}

/* ── Il logo reagisce al passaggio ─────────────────────── */
.nav-logo .logo-mark{transition:transform 420ms var(--e-out),box-shadow 420ms var(--e-out)}
.nav-logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08);box-shadow:0 4px 16px rgba(29,90,168,.45)}

/* ── Chip delle fonti ──────────────────────────────────── */
.source-chip{transition:border-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out),
             background var(--t-fast) var(--e-out),transform var(--t-base) var(--e-out)}
.source-chip:hover{transform:translateY(-2px)}

/* ── Niente di tutto questo su touch o con motion ridotto ── */
@media (hover:none),(pointer:coarse){
  .cursor-glow{display:none}
  .is-magnetic,.is-magnetic > *{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cursor-glow{display:none}
  .is-magnetic,.is-magnetic > *{transform:none!important;transition:none!important}
  .step::before,.info-card::before,.sec-item::before,
  .source-card::before,.plan::before{display:none}
  .scroll-progress{display:none}
  .js .reveal .step,.js .reveal .info-card,.js .reveal .sec-item,
  .js .reveal .plan,.js .reveal .source-card{opacity:1!important;transform:none!important}
  .js .hero-panel .panel-item{opacity:1!important;transform:none!important;animation:none!important}
}