/* ===== HOME ANIMATA ===== */
.hx { --ink:#0d1117; --ink-2:#151b24; --ink-3:#1d2531; --line:#2a3340; --mute:#8b96a3; --paper:#eef0f3; --orange:#f39c12; --orange-2:#e67e22; background:var(--ink); color:#e9edf1; }
.hx h1, .hx h2, .hx h3 { font-family:'Poppins','Segoe UI',sans-serif; }

/* --- Hero con stampa guidata dallo scroll --- */
.hx-hero { position:relative; height:260vh; }
.hx-stage { position:sticky; top:var(--hh,68px); height:calc(100vh - var(--hh,68px)); height:calc(100svh - var(--hh,68px)); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:24px; padding:0 6vw; overflow:hidden;
  background:
    radial-gradient(900px 520px at 72% 58%, rgba(243,156,18,0.10), transparent 70%),
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px) 0 0/56px 56px,
    var(--ink); }
.hx-copy { max-width:600px; position:relative; z-index:2; }
.hx-title { font-size:clamp(38px, 5.4vw, 76px); line-height:1.02; font-weight:800; letter-spacing:-0.02em; color:#fff; margin-bottom:22px; }
.hx-line { display:block; overflow:hidden; }
.hx-line > span { display:inline-block; animation:hxLayer 0.9s steps(12, end) both; }
.hx-line:nth-child(1) > span { animation-delay:0.15s; }
.hx-line:nth-child(2) > span { animation-delay:0.55s; }
.hx-line:nth-child(3) > span { animation-delay:0.95s; color:var(--orange); }
@keyframes hxLayer { from { clip-path:inset(100% 0 0 0); } to { clip-path:inset(0 0 0 0); } }
.hx-lead { font-size:clamp(16px,1.35vw,19px); line-height:1.6; color:#b6c0cb; max-width:46ch; margin-bottom:30px; opacity:0; animation:hxFade 0.8s ease 1.5s both; }
.hx-actions { display:flex; flex-wrap:wrap; gap:12px; opacity:0; animation:hxFade 0.8s ease 1.7s both; }
.hx-actions-center { justify-content:center; opacity:1; animation:none; }
@keyframes hxFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.hx-btn { display:inline-flex; align-items:center; justify-content:center; padding:15px 28px; border-radius:50px; font-family:'Poppins',sans-serif; font-weight:700; font-size:15.5px; text-decoration:none; transition:transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.hx-btn:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.hx-btn-solid { background:var(--orange); color:#1a1205; }
.hx-btn-solid:hover { background:#ffb02e; transform:translateY(-2px); }
.hx-btn-ghost { border:1.5px solid #4a5563; color:#e9edf1; }
.hx-btn-ghost:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }
.hx-btn-dark { background:var(--ink); color:#fff; }
.hx-btn-dark:hover { background:#000; transform:translateY(-2px); }
.hx-btn-line { border:2px solid var(--ink); color:var(--ink); }
.hx-btn-line:hover { background:rgba(13,17,23,0.08); transform:translateY(-2px); }

.hx-hint { margin-top:34px; display:flex; align-items:center; gap:10px; color:var(--mute); font-size:14px; opacity:0; animation:hxFade .8s ease 2.1s both; transition:opacity .4s ease; }
.hx-hint.is-done { opacity:0 !important; }
.hx-hint-dot { width:22px; height:34px; border:1.5px solid #4a5563; border-radius:12px; position:relative; flex-shrink:0; }
.hx-hint-dot::after { content:''; position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background:var(--orange); animation:hxWheel 1.6s ease-in-out infinite; }
@keyframes hxWheel { 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(10px);opacity:0} 100%{opacity:0} }

.hx-printer { position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#hx-canvas { width:100%; height:min(72vh, 640px); display:block; }
.hx-hud { display:grid; grid-template-columns:repeat(3, auto); gap:6px 28px; padding:14px 20px 16px; border:1px solid var(--line); border-radius:12px; background:rgba(21,27,36,0.82); backdrop-filter:blur(6px); font-size:13px; font-variant-numeric:tabular-nums; }
.hx-hud > div:not(.hx-hud-bar) { display:flex; flex-direction:column; gap:2px; }
.hx-hud-k { color:var(--mute); }
.hx-hud-v { color:#fff; font-weight:600; font-size:15px; }
.hx-hud-bar { grid-column:1/-1; height:3px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:6px; }
.hx-hud-bar span { display:block; height:100%; width:0; background:var(--orange); }
.hx-hud.is-done .hx-hud-v#hud-pct { color:var(--orange); }

/* --- Due strade --- */
.hx-paths { padding:120px 6vw 110px; max-width:1240px; margin:0 auto; }
.hx-h2 { font-size:clamp(28px,3.2vw,44px); font-weight:700; letter-spacing:-0.015em; margin-bottom:44px; color:inherit; }
.hx-paths-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.hx-path { --mx:50%; --my:50%; --spot:rgba(52,152,219,0.16); position:relative; display:block; padding:40px 38px 36px; border:1px solid var(--line); border-radius:20px; background:var(--ink-2); color:#e9edf1; text-decoration:none; overflow:hidden; transition:border-color .25s ease, transform .25s ease; }
.hx-path-warm { --spot:rgba(243,156,18,0.18); }
.hx-path::before { content:''; position:absolute; inset:0; background:radial-gradient(420px circle at var(--mx) var(--my), var(--spot), transparent 60%); opacity:0; transition:opacity .3s ease; pointer-events:none; }
.hx-path:hover::before, .hx-path:focus-visible::before { opacity:1; }
.hx-path:hover { border-color:#3a4553; transform:translateY(-3px); }
.hx-path:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.hx-path > * { position:relative; }
.hx-path-icon { width:44px; height:44px; color:#5dade2; margin-bottom:26px; }
.hx-path-warm .hx-path-icon { color:var(--orange); }
.hx-path h3 { font-size:26px; margin-bottom:12px; color:#fff; }
.hx-path p { color:#aab4bf; line-height:1.65; max-width:48ch; margin-bottom:22px; }
.hx-path ul { list-style:none; margin-bottom:30px; }
.hx-path li { padding:10px 0; border-top:1px solid var(--line); color:#d4dae0; font-size:15px; }
.hx-path-link { font-family:'Poppins',sans-serif; font-weight:600; color:#5dade2; border-bottom:2px solid currentColor; padding-bottom:2px; }
.hx-path-warm .hx-path-link { color:var(--orange); }

/* --- Processo --- */
.hx-steps { background:var(--paper); color:var(--ink); padding:110px 6vw; }
.hx-steps .hx-h2 { max-width:1100px; margin-left:auto; margin-right:auto; }
.hx-steps-list { --fill:0; position:relative; list-style:none; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.hx-steps-list::before, .hx-steps-list::after { content:''; position:absolute; top:22px; left:22px; right:22px; height:2px; border-radius:2px; }
.hx-steps-list::before { background:#d3d8de; }
.hx-steps-list::after { background:var(--orange); transform-origin:left; transform:scaleX(var(--fill)); }
.hx-step { position:relative; z-index:1; }
.hx-step-n { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:var(--paper); border:2px solid #c5ccd4; font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:#8a94a0; margin-bottom:22px; transition:background-color .3s ease, border-color .3s ease, color .3s ease; }
.hx-step.is-on .hx-step-n { background:var(--orange); border-color:var(--orange); color:#1a1205; }
.hx-step h3 { font-size:19px; margin-bottom:8px; }
.hx-step p { color:#56606c; line-height:1.6; font-size:15px; }

/* --- Chiusura --- */
.hx-cta { background:var(--orange); color:var(--ink); text-align:center; padding:110px 6vw; }
.hx-cta h2 { font-size:clamp(32px,4.4vw,60px); font-weight:800; letter-spacing:-0.02em; margin-bottom:14px; }
.hx-cta p { font-size:18px; max-width:48ch; margin:0 auto 34px; color:#3d2a08; line-height:1.55; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .hx-hero { height:230vh; }
  .hx-stage { grid-template-columns:1fr; grid-template-rows:auto 1fr; align-content:start; padding:26px 22px 18px; gap:6px; }
  .hx-printer { order:-1; height:auto; }
  #hx-canvas { height:34vh; }
  .hx-hud { grid-template-columns:repeat(3,auto); gap:4px 18px; padding:10px 14px 12px; font-size:12px; }
  .hx-hud-v { font-size:13.5px; }
  .hx-title { font-size:clamp(32px, 9vw, 46px); margin:14px 0 14px; }
  .hx-lead { margin-bottom:20px; font-size:15.5px; }
  .hx-hint { margin-top:18px; }
  .hx-paths { padding:80px 22px; }
  .hx-paths-grid { grid-template-columns:1fr; }
  .hx-path { padding:30px 24px; }
  .hx-steps { padding:80px 22px; }
  .hx-steps-list { grid-template-columns:1fr; gap:30px; padding-left:0; }
  .hx-steps-list::before, .hx-steps-list::after { top:22px; bottom:22px; left:22px; right:auto; width:2px; height:auto; }
  .hx-steps-list::after { transform-origin:top; transform:scaleY(var(--fill)); }
  .hx-step { display:grid; grid-template-columns:46px 1fr; gap:18px; }
  .hx-step-n { margin-bottom:0; }
  .hx-cta { padding:80px 22px; }
}
@media (max-height: 640px) and (max-width: 900px) { .hx-hint { display:none; } #hx-canvas { height:30vh; } }

/* --- Movimento ridotto --- */
@media (prefers-reduced-motion: reduce) {
  .hx-hero { height:auto; }
  .hx-stage { position:relative; top:0; min-height:calc(100vh - var(--hh,68px)); height:auto; padding-top:40px; padding-bottom:40px; }
  .hx-line > span, .hx-lead, .hx-actions, .hx-hint { animation:none; opacity:1; }
  .hx-hint { display:none; }
  .hx-btn, .hx-path, .hx-step-n { transition:none; }
}