/* Pagina /it/demo/: le due porte verso le demo di Pro (modelli) e Managed (siti veri). Si appoggia a style.css. */
.dm-stage{position:relative;isolation:isolate;overflow:hidden;background:#060608;color:#f5f5f7;padding:150px var(--pad) 120px}
.dm-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dm-glow i{position:absolute;width:62vw;height:62vw;max-width:900px;max-height:900px;border-radius:50%;filter:blur(90px);opacity:.55}
.dm-glow-pro{left:-12vw;top:18%;background:radial-gradient(circle,#2f5bd8 0,#1b2f6e 40%,transparent 70%)}
.dm-glow-managed{right:-14vw;top:30%;background:radial-gradient(circle,#c8743f 0,#6e3417 42%,transparent 70%)}
.dm-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.10),transparent 55%)}

.dm-hero{max-width:980px;margin:0 auto 64px;text-align:center}
.dm-breadcrumb{display:inline-flex;gap:10px;font-size:13px;color:#a1a1a6;margin-bottom:26px}
.dm-breadcrumb a:hover{color:#fff}
.dm-hero h1{font-size:clamp(48px,7.4vw,108px);line-height:.98;letter-spacing:-.05em;color:#fff}
.dm-accent{display:block;color:#86868b}
.dm-lead{max-width:660px;margin:28px auto 0;font-size:20px;line-height:1.5;color:#c7c7cc}

.dm-doors{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1240px;margin:0 auto}
.dm-door{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-start;padding:36px;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 120px -50px rgba(0,0,0,.9);
  transition:transform .6s var(--spring),border-color .4s,box-shadow .6s var(--spring)}
.dm-door::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.9;transition:opacity .5s}
.dm-door-pro::before{background:radial-gradient(ellipse at 50% 18%,rgba(70,120,255,.42),transparent 62%)}
.dm-door-managed::before{background:radial-gradient(ellipse at 50% 18%,rgba(231,140,82,.42),transparent 62%)}
.dm-door:hover,.dm-door:focus-visible{transform:translateY(-8px);border-color:rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 60px 140px -50px rgba(0,0,0,1)}

.dm-stack{position:relative;height:400px;margin:0 -36px 8px;perspective:1500px;transform-style:preserve-3d}
.dm-win{position:absolute;left:50%;top:40px;width:74%;margin:0;border-radius:14px;overflow:hidden;background:#111;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px -20px rgba(0,0,0,.85);
  transform-origin:50% 100%;transition:transform .8s var(--spring),filter .6s}
.dm-bar{display:flex;gap:6px;align-items:center;height:22px;padding:0 10px;background:linear-gradient(180deg,#2a2a2e,#1c1c1f)}
.dm-bar i{width:8px;height:8px;border-radius:50%;background:#4a4a50}
.dm-win img{width:100%;aspect-ratio:1440/1000;object-fit:cover;object-position:top}
.dm-win-1{z-index:3;transform:translateX(-50%) rotateX(14deg) rotateZ(0) translateZ(60px)}
.dm-win-2{z-index:2;transform:translateX(-78%) rotateX(14deg) rotateZ(-9deg) translateY(-18px) scale(.9);filter:brightness(.62)}
.dm-win-3{z-index:1;transform:translateX(-22%) rotateX(14deg) rotateZ(9deg) translateY(-18px) scale(.9);filter:brightness(.62)}
.dm-door:hover .dm-win-1,.dm-door:focus-visible .dm-win-1{transform:translateX(-50%) rotateX(4deg) translateY(-14px) translateZ(90px)}
.dm-door:hover .dm-win-2,.dm-door:focus-visible .dm-win-2{transform:translateX(-92%) rotateX(6deg) rotateZ(-13deg) translateY(-6px) scale(.88);filter:brightness(.8)}
.dm-door:hover .dm-win-3,.dm-door:focus-visible .dm-win-3{transform:translateX(-8%) rotateX(6deg) rotateZ(13deg) translateY(-6px) scale(.88);filter:brightness(.8)}

.dm-copy{position:relative;z-index:4;max-width:470px}
.dm-chip{display:inline-block;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;background:rgba(14,14,16,.82);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dm-copy h2{margin-top:18px;font-size:clamp(34px,3.6vw,50px);color:#fff}
.dm-copy p:not(.dm-chip){margin-top:14px;font-size:17px;line-height:1.55;color:#c7c7cc}
.dm-button{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:18px 30px;border-radius:999px;font-size:18px;font-weight:600;transition:transform .4s var(--spring),box-shadow .4s}
.dm-door-pro .dm-button{background:#f5f5f7;color:var(--ink);box-shadow:0 18px 50px -18px rgba(90,140,255,.7)}
.dm-door-managed .dm-button{background:linear-gradient(180deg,#e7a06e,#c47641);color:#1a0f08;box-shadow:0 18px 50px -18px rgba(231,140,82,.8)}
.dm-door:hover .dm-button{transform:scale(1.04)}
.dm-button .icon{width:20px;height:20px;stroke-width:2}

.dm-after{max-width:760px;margin:72px auto 0;text-align:center}
.dm-after p{font-size:17px;color:#a1a1a6}
.dm-after-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 32px;margin-top:18px}
.dm-link{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;color:#fff}
.dm-link .icon{color:var(--copper-lt)}
.dm-link:hover span{text-decoration:underline;text-underline-offset:4px}

@media(max-width:900px){
  .dm-stage{padding:118px 16px 80px}
  .dm-hero{margin-bottom:40px}
  .dm-hero h1{font-size:44px}
  .dm-lead{font-size:17px}
  .dm-doors{grid-template-columns:1fr;gap:20px}
  .dm-door{padding:24px}
  .dm-stack{height:230px;margin:0 -24px 34px}
  .dm-win{top:22px}
  .dm-win{width:80%;top:30px}
  .dm-copy h2{font-size:32px}
  .dm-button{width:100%;justify-content:center;padding:17px 22px;font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .dm-door,.dm-win,.dm-button{transition:none}
}