/* Pagina "Richiedi una demo": hero con foto ed elementi flottanti, passaggi, modulo. Caricato solo da pages/demo.html. */
.dm-free{display:flex;align-items:center;gap:.5rem;color:var(--accent-dark);font-weight:700;margin-bottom:1.4rem}
.dm-media{position:relative;isolation:isolate;margin:0 0 1.5rem 0}
.dm-media>img{display:block;width:100%;height:auto;border-radius:28px;box-shadow:0 30px 70px -20px rgba(6,103,176,.45)}
/* forme geometriche dietro la foto */
.dm-media::before,.dm-media::after{content:"";position:absolute;z-index:-1;border-radius:32px;animation:dm-shape 14s ease-in-out infinite alternate}
.dm-media::before{width:62%;aspect-ratio:1;top:-8%;right:-5%;background:linear-gradient(135deg,var(--primary),#6b5bd6);--r:16deg;transform:rotate(var(--r))}
.dm-media::after{width:34%;aspect-ratio:1;bottom:-7%;left:-4%;background:var(--accent);--r:-12deg;transform:rotate(var(--r));animation-delay:-7s}
@keyframes dm-shape{to{transform:rotate(calc(var(--r) + 9deg)) translate(10px,-10px)}}
.dm-card{position:absolute;display:flex;align-items:center;gap:.7rem;background:#fff;border-radius:16px;padding:.7rem 1rem;box-shadow:0 16px 40px -10px rgba(21,24,36,.3)}
.dm-cal{left:-4%;bottom:10%;animation:dm-bob 5s ease-in-out infinite}
.dm-cal b{display:block;font-size:.95rem;color:var(--ink);line-height:1.2}
.dm-cal small{color:var(--muted);font-size:.78rem}
.dm-calico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--tint-green,#def4ea);color:var(--accent-dark)}
.dm-calico .tick{stroke-dasharray:14;stroke-dashoffset:14;animation:dm-tick 3.6s ease-in-out infinite}
@keyframes dm-tick{0%,15%{stroke-dashoffset:14}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
.dm-chips{list-style:none;margin:0;padding:0}
.dm-chip{position:absolute;display:flex;align-items:center;gap:.5rem;background:#fff;border-radius:999px;padding:.4rem .95rem .4rem .7rem;font-weight:700;font-size:.85rem;color:var(--ink);box-shadow:0 12px 30px -8px rgba(21,24,36,.28);animation:dm-bob 6s ease-in-out infinite}
.dm-chip i{width:.65rem;height:.65rem;border-radius:50%;background:var(--primary)}
.dm-chip.c1{top:6%;left:-3%}
.dm-chip.c2{top:22%;right:-4%;animation-delay:-2s}.dm-chip.c2 i{background:var(--accent)}
.dm-chip.c3{bottom:-3%;right:8%;animation-delay:-4s}.dm-chip.c3 i{background:#6b5bd6}
@keyframes dm-bob{50%{transform:translateY(-9px)}}
/* ingresso dei pezzi flottanti */
.js .dm-media:not(.in) .dm-card,.js .dm-media:not(.in) .dm-chip{opacity:0}
.js .dm-media.in .dm-card,.js .dm-media.in .dm-chip{animation:dm-bob 6s ease-in-out infinite,dm-pop .7s cubic-bezier(.3,1.5,.5,1) backwards}
.js .dm-media.in .dm-cal{animation-delay:0s,.7s}.js .dm-media.in .c1{animation-delay:0s,.9s}
.js .dm-media.in .c2{animation-delay:-2s,1.1s}.js .dm-media.in .c3{animation-delay:-4s,1.3s}
@keyframes dm-pop{from{opacity:0;transform:scale(.6) translateY(14px)}}
@media (max-width:899px){.dm-cal{left:2%}.dm-chip.c1{left:2%}.dm-chip.c2{right:2%}}

/* pulsante: freccia che rimbalza */
.dm-jump span{display:inline-block;animation:dm-nudge 1.6s ease-in-out infinite}
@keyframes dm-nudge{50%{transform:translateY(4px)}}

/* passaggi */
.dm-steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.25rem;position:relative}
@media (min-width:860px){
  .dm-steps{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .dm-steps li:not(:last-child)::after{content:"";position:absolute;top:2.2rem;left:calc(50% + 2.2rem);width:calc(100% - 4.4rem + 1.5rem);height:3px;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 16px);background-size:16px 3px;animation:dm-dash 1s linear infinite;opacity:.8}
}
@keyframes dm-dash{to{background-position:16px 0}}
.dm-steps li{position:relative;text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.6rem 1.4rem 1.5rem;transition:transform .3s,box-shadow .3s,border-color .3s}
.dm-steps li:hover{transform:translateY(-6px);box-shadow:0 18px 40px -12px rgba(22,34,46,.18);border-color:var(--primary)}
.dm-n{display:inline-grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:800;font-size:1.3rem;margin-bottom:1rem;box-shadow:0 10px 22px -8px rgba(6,103,176,.6);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.dm-steps li:hover .dm-n{transform:scale(1.12) rotate(-8deg)}
.dm-steps h3{margin-bottom:.4rem}
.dm-steps p{margin:0;color:var(--text);font-size:.96rem}
.js .dm-steps li.reveal.in{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .3s,box-shadow .3s,border-color .3s}

/* modulo */
.dm-split{align-items:start}
.dm-formwrap{position:relative}
@media (min-width:860px){.dm-formwrap{position:sticky;top:96px}}
.dm-form-card{position:relative;border:0;border-radius:24px;padding:2rem;box-shadow:0 30px 70px -24px rgba(6,103,176,.35)}
.dm-form-card::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:26px;background:linear-gradient(120deg,var(--primary),var(--accent),#6b5bd6,var(--primary));background-size:300% 300%;animation:dm-grad 8s linear infinite}
.dm-form-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:24px;background:#fff}
@keyframes dm-grad{to{background-position:300% 0}}
.dm-form-card input:focus,.dm-form-card textarea:focus{box-shadow:0 0 0 4px rgba(49,180,133,.2);transition:box-shadow .25s}
.dm-shot{margin:1.8rem 0 2rem;border-radius:18px;overflow:hidden;box-shadow:0 20px 50px -18px rgba(6,103,176,.35);transition:transform .5s ease,box-shadow .5s ease}
.dm-shot img{display:block;width:100%;height:auto;transition:transform .8s ease}
.dm-shot:hover{transform:translateY(-4px)}
.dm-shot:hover img{transform:scale(1.04)}
.dm-ct{margin-top:.5rem}
.dm-contact{display:grid;gap:.6rem;font-style:normal}
.dm-contact a,.dm-contact p{display:flex;align-items:center;gap:.9rem;margin:0;padding:.7rem .9rem;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;font-weight:600;transition:transform .25s,border-color .25s,box-shadow .25s}
.dm-contact a:hover{transform:translateX(6px);border-color:var(--accent);box-shadow:0 10px 24px -10px rgba(13,123,84,.4)}
.dm-contact svg{flex:none;width:2.4rem;height:2.4rem;padding:.55rem;border-radius:12px;background:var(--tint-blue,#dcecf8);color:var(--primary);transition:background .25s,color .25s}
.dm-contact a:hover svg{background:var(--accent-dark);color:#fff}
.dm-contact small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
.dm-strip{padding-top:2.5rem}

@media (prefers-reduced-motion:reduce){
  .dm-media::before,.dm-media::after,.dm-card,.dm-chip,.dm-jump span,.dm-calico .tick,.dm-form-card::before,.dm-steps li::after{animation:none!important}
  .js .dm-media:not(.in) .dm-card,.js .dm-media:not(.in) .dm-chip{opacity:1}
  .dm-calico .tick{stroke-dashoffset:0}
}