/* PragaWeb – slider dei prodotti della home con scene 3D (caricato solo nella home) */

/* ---------- Slider ---------- */
.psl { --pdark: #170527; --pdeep: #2B0748; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.psl__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.psl__nav[hidden] { display: none; }
.psl__tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.psl__tab { position: relative; display: inline-flex; align-items: baseline; gap: .5rem; min-height: 44px; padding: .55rem 1rem .7rem; border: 0; border-radius: 12px; background: transparent; color: var(--c-muted); cursor: pointer; font-weight: 600; font-size: 1rem; transition: color .25s, background-color .25s; }
.psl__tab:hover { color: var(--c-ink); background: color-mix(in oklab, var(--c-surface) 70%, transparent); }
.psl__tab[aria-selected="true"] { color: var(--c-ink); }
.psl__tab-n { font-family: var(--f-display); font-size: .72rem; font-weight: 500; color: var(--c-primary); letter-spacing: .04em; }
.psl__tab-bar { position: absolute; left: 1rem; right: 1rem; bottom: .35rem; height: 3px; border-radius: 3px; background: var(--c-line); overflow: hidden; }
.psl__tab-bar::after { content: ""; position: absolute; inset: 0; background: var(--c-primary); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.psl__tab[aria-selected="true"] .psl__tab-bar::after { transform: none; }
.psl__arrows { display: flex; gap: .5rem; }
.psl__flip { transform: rotate(180deg); }

.psl__viewport { display: grid; gap: 1.25rem; touch-action: pan-y; }
.psl__slide {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(1rem, 3vw, 3rem);
  min-height: clamp(520px, 44vw, 640px); padding: clamp(1.75rem, 4vw, 3.75rem);
  border-radius: calc(var(--r) + 10px); color: #fff;
  background: radial-gradient(120% 90% at 85% 15%, color-mix(in oklab, var(--acc) 26%, var(--pdeep)) 0%, var(--pdeep) 38%, var(--pdark) 100%);
}
.psl__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.psl__bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 80% at 70% 40%, #000 0%, transparent 75%); }
.psl__bg i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.psl__bg i:first-child { width: 42%; aspect-ratio: 1; right: 6%; top: 10%; background: color-mix(in oklab, var(--acc) 70%, transparent); }
.psl__bg i:last-child { width: 30%; aspect-ratio: 1; left: -8%; bottom: -14%; background: color-mix(in oklab, #6A2BFF 60%, transparent); opacity: .35; }

.psl__text { position: relative; z-index: 2; display: grid; gap: 1rem; align-content: center; max-width: 34rem; }
.psl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .92rem; color: rgba(255,255,255,.82); }
.psl__stage.stage { background: rgba(255,255,255,.12); color: #fff; }
.psl__stage.stage--live { background: rgba(70, 214, 140, .16); color: #8EF0BC; }
.psl__stage.stage--dev { background: rgba(255,255,255,.12); color: #E6D3FF; }
.psl__fam { font-weight: 600; }
.psl__count { margin-left: auto; font-family: var(--f-display); font-size: .78rem; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.psl__name { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.9rem); line-height: 1; letter-spacing: -.035em; }
.psl__tag { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.35; color: #fff; font-weight: 500; }
.psl__sum { color: rgba(255,255,255,.78); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.psl__feats { display: flex; flex-wrap: wrap; gap: .45rem; }
.psl__feats li { padding: .38rem .8rem; border-radius: 999px; font-size: .88rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); }
.psl__feats li::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: var(--acc); vertical-align: .08em; }
.psl__feats .psl__more { background: transparent; border-style: dashed; }
.psl__feats .psl__more::before { display: none; }
.psl__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .5rem; }
.psl__ext .sr + *, .psl__ext span[aria-hidden] { margin-left: .3em; }
.psl__ext { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: .3em; min-height: 44px; display: inline-flex; align-items: center; }
.psl__ext:hover { text-decoration-color: #fff; }
.psl__ext:focus-visible, .psl__slide .btn:focus-visible { outline-color: #fff; }
.psl__vis { position: relative; z-index: 1; align-self: stretch; display: grid; place-items: center; margin: -1rem -1rem -1rem 0; }

/* Con JavaScript: una slide alla volta, sovrapposte nella stessa cella */
.js .psl__viewport { grid-template-areas: "s"; gap: 0; }
.js .psl__slide { grid-area: s; visibility: hidden; opacity: 0; transition: opacity .55s var(--ease), visibility 0s linear .55s; }
.js .psl__slide.is-active { visibility: visible; opacity: 1; transition: opacity .55s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: no-preference) {
  .js .psl__slide .psl__text > * { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); transition: opacity .5s var(--ease), transform .7s var(--ease); }
  .js .psl__slide.is-active .psl__text > * { opacity: 1; transform: none; }
  .js .psl__slide.is-active .psl__text > :nth-child(2) { transition-delay: .06s; }
  .js .psl__slide.is-active .psl__text > :nth-child(3) { transition-delay: .12s; }
  .js .psl__slide.is-active .psl__text > :nth-child(4) { transition-delay: .18s; }
  .js .psl__slide.is-active .psl__text > :nth-child(5) { transition-delay: .24s; }
  .js .psl__slide.is-active .psl__text > :nth-child(6) { transition-delay: .3s; }
  .js .psl__slide .psl__vis { opacity: 0; transform: perspective(1400px) translateX(calc(var(--dir, 1) * 60px)) rotateY(calc(var(--dir, 1) * -24deg)) scale(.92); transition: opacity .6s var(--ease), transform 1s var(--ease); }
  .js .psl__slide.is-active .psl__vis { opacity: 1; transform: none; transition-delay: .08s; }
}

@media (max-width: 900px) {
  .psl__slide { grid-template-columns: 1fr; min-height: 0; }
  .psl__vis { order: -1; margin: -1.5rem -1rem -14%; }
  .psl__text { max-width: none; }
  .psl__tab-l { font-size: .95rem; }
}
@media (max-width: 560px) {
  .psl__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.25rem; width: 100%; }
  .psl__tabs::-webkit-scrollbar { display: none; }
  .psl__tab { flex: none; }
  .psl__arrows { display: none; }
  .psl__sum { -webkit-line-clamp: 5; }
}

/* ---------- Scena 3D ---------- */
.pst { --ink3: #12041F; position: relative; width: 100%; max-width: 700px; aspect-ratio: 1.12; container-type: inline-size; perspective: 1500px; perspective-origin: 50% 40%; pointer-events: none; user-select: none; }
.pst__stage { position: absolute; inset: 4% 3%; transform-style: preserve-3d; transform: translate(var(--px, 0), var(--py, 0)) rotateX(calc(10deg + var(--rx, 0deg))) rotateY(calc(-13deg + var(--ry, 0deg))); transition: transform .2s linear; }
.pst__l { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform-style: preserve-3d; transform: translateZ(calc(var(--z) * .14cqw)); }
.pst__floor { position: absolute; left: -8%; right: -8%; bottom: -6%; height: 70%; transform: translateZ(-120px) rotateX(78deg); transform-origin: bottom; background-image: linear-gradient(color-mix(in oklab, var(--acc) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--acc) 45%, transparent) 1px, transparent 1px); background-size: 9% 9%; mask-image: radial-gradient(55% 60% at 50% 55%, #000, transparent 70%); opacity: .28; }
.pst__glow { position: absolute; left: 12%; right: 12%; top: 30%; height: 50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--acc) 55%, transparent), transparent); transform: translateZ(-60px); filter: blur(10px); opacity: .7; }

.pst__card { position: relative; border-radius: clamp(10px, 2.4cqw, 18px); background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 30px 60px -20px rgba(5, 0, 15, .7), inset 0 1px 0 rgba(255,255,255,.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; padding: clamp(8px, 2.2cqw, 16px); font-size: clamp(9px, 2.1cqw, 14px); line-height: 1.3; }
.pst__screen { background: linear-gradient(165deg, #2E0F52 0%, #1A0634 100%); border-color: rgba(255,255,255,.16); padding: 0; overflow: hidden; box-shadow: 0 50px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04), 0 0 80px -20px color-mix(in oklab, var(--acc) 60%, transparent); }
.pst__bar { display: flex; align-items: center; gap: .45em; padding: .8em 1em; border-bottom: 1px solid rgba(255,255,255,.1); }
.pst__bar i { width: .6em; height: .6em; border-radius: 50%; background: rgba(255,255,255,.28); }
.pst__bar i:first-child { background: color-mix(in oklab, var(--acc) 80%, #fff); }
.pst__bar b { margin-left: .5em; font-weight: 600; font-size: .95em; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pst__card > .pst__bar { margin: calc(-1 * clamp(8px, 2.2cqw, 16px)) calc(-1 * clamp(8px, 2.2cqw, 16px)) .7em; }
.pst__k { display: block; font-size: .82em; color: rgba(255,255,255,.7); letter-spacing: .02em; }
.pst__pill { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.1em; border-radius: 999px; background: #fff; color: var(--ink3); font-weight: 600; font-size: clamp(9px, 2cqw, 13.5px); white-space: nowrap; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); }
.pst__pill b { color: #0E7A46; }
.pst__dot { width: .7em; height: .7em; border-radius: 50%; background: #1DB66B; box-shadow: 0 0 0 0 rgba(29,182,107,.6); animation: pstPulse 2s infinite; }
.pst__prog { height: .55em; margin: .6em 0 .45em; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.pst__prog i { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklab, var(--acc) 70%, #fff), var(--acc)); transform-origin: left; animation: pstFill 5s var(--ease) infinite; }
.pst__ring { position: relative; display: grid; place-items: center; }
.pst__ring svg { width: 100%; transform: rotate(-90deg); }
.pst__ring circle { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 9; }
.pst__ring .pst__ring-v { stroke: var(--acc); stroke-linecap: round; stroke-dasharray: var(--v) 100; animation: pstRing 4s var(--ease) infinite; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--acc) 70%, transparent)); }
.pst__ring-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pst__ring-t b { font-family: var(--f-display); font-size: 2.1em; font-weight: 500; line-height: 1; }
.pst__ring-t span { font-size: .78em; color: rgba(255,255,255,.75); margin-top: .3em; }
.pst__mini { padding: clamp(10px, 2.6cqw, 18px); }

/* Oggetti estrusi */
.pst__ext { position: relative; aspect-ratio: 1; transform-style: preserve-3d; }
.pst__ext svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(calc(var(--k) * -1.1cqw)); fill: color-mix(in oklab, var(--acc) 45%, #12041F); stroke: none; }
.pst__ext .pst__ext-f { fill: color-mix(in oklab, var(--acc) 92%, #fff); filter: drop-shadow(0 0 14px color-mix(in oklab, var(--acc) 60%, transparent)); }
.pst__ext svg:not(.pst__ext-f) { fill: color-mix(in oklab, var(--acc) calc(30% + var(--k) * -3%), #12041F); }
.pst__ext .pst__coin-sym, .pst__ext .pst__lock, .pst__ext .pst__fig-p, .pst__ext .pst__star { fill: none; stroke: #2B0748; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pst__ext svg:not(.pst__ext-f) .pst__coin-sym, .pst__ext svg:not(.pst__ext-f) .pst__lock, .pst__ext svg:not(.pst__ext-f) .pst__fig-p, .pst__ext svg:not(.pst__ext-f) .pst__star { stroke: none; }
.pst__ext .pst__fig-p circle { fill: #2B0748; stroke: none; }
.pst__ext .pst__star { fill: #2B0748; stroke: none; }
.pst__lock { stroke-width: 7 !important; }

.pst__spin-slow .pst__ext { animation: pstSpin 18s linear infinite; }
.pst__spin-rev .pst__ext { animation: pstSpin 9s linear infinite reverse; }
.pst__turn > * { animation: pstTurn 9s ease-in-out infinite; }
.pst__sway > * { animation: pstSway 10s ease-in-out infinite; }
.pst__float > * { animation: pstFloat 7s ease-in-out infinite; animation-delay: var(--d); }

/* MekPlan */
.pst__gantt { position: relative; padding: .4em 1em 1em; display: grid; gap: .5em; }
.pst__days { display: grid; grid-template-columns: 5.4em repeat(5, 1fr); font-size: .8em; color: rgba(255,255,255,.55); }
.pst__days i { font-style: normal; text-align: center; }
.pst__days::before { content: ""; }
.pst__grow { display: grid; grid-template-columns: 5.4em 1fr; align-items: center; gap: .2em; font-size: .9em; color: rgba(255,255,255,.8); }
.pst__lane { position: relative; height: 1.5em; border-radius: 6px; background: rgba(255,255,255,.05); }
.pst__task { position: absolute; top: 15%; bottom: 15%; left: var(--x); width: var(--w); border-radius: 5px; background: linear-gradient(90deg, var(--acc), color-mix(in oklab, var(--acc) 60%, #fff)); transform-origin: left; animation: pstGrow 6s var(--ease) infinite; animation-delay: calc(var(--i) * .15s); }
.pst__task--b { background: linear-gradient(90deg, #9A7BFF, #C6B5FF); }
.pst__task--c { background: linear-gradient(90deg, #33D6A8, #A2F0D9); }
.pst__now { position: absolute; top: 1.6em; bottom: .6em; left: 52%; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; animation: pstNow 12s linear infinite; }
.pst__now::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.pst__order b { display: block; font-size: 1.15em; margin-top: .2em; }

/* AXGEST */
.pst__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; padding: 1em 1em .4em; }
.pst__kpis div { padding: .6em .7em; border-radius: 10px; background: rgba(255,255,255,.06); }
.pst__kpis span { display: block; font-size: .78em; color: rgba(255,255,255,.65); }
.pst__kpis b { font-family: var(--f-display); font-weight: 500; font-size: 1.25em; }
.pst__chart { position: relative; height: 9em; margin: .6em 1em 1em; }
.pst__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 6%; }
.pst__bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 85%, #fff), color-mix(in oklab, var(--acc) 35%, transparent)); transform-origin: bottom; animation: pstBar 5s var(--ease) infinite; animation-delay: calc(var(--i) * .08s); }
.pst__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pst__line path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 100; vector-effect: non-scaling-stroke; animation: pstDraw 5s var(--ease) infinite; }
.pst__invoice b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.5em; margin: .25em 0 .5em; }
.pst__stamp { display: inline-block; padding: .3em .7em; border-radius: 8px; border: 2px solid #8EF0BC; color: #8EF0BC; font-weight: 700; font-size: .9em; transform: rotate(-6deg); animation: pstStamp 5s var(--ease) infinite; }
.pst__kanban { padding-bottom: 1em; }
.pst__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.pst__cols div { display: grid; gap: .35em; align-content: start; }
.pst__cols span { font-size: .78em; color: rgba(255,255,255,.65); }
.pst__cols i { height: 1.7em; border-radius: 6px; background: rgba(255,255,255,.12); }
.pst__move { position: absolute; left: 7%; bottom: 1em; width: 26%; height: 1.7em; border-radius: 6px; background: var(--acc); box-shadow: 0 8px 20px -6px var(--acc); animation: pstMove 6s var(--ease) infinite; }

/* My Access Check */
.pst__page { position: relative; padding: 1em; display: grid; gap: .8em; }
.pst__hero-b { display: grid; gap: .45em; padding: 1em; border-radius: 10px; background: rgba(255,255,255,.07); }
.pst__hero-b b { height: .8em; width: 70%; border-radius: 4px; background: rgba(255,255,255,.5); }
.pst__hero-b b + b { width: 45%; background: rgba(255,255,255,.25); }
.pst__hero-b i { width: 26%; height: 1.7em; border-radius: 99px; background: var(--acc); margin-top: .3em; }
.pst__blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.pst__blocks i { height: 4.2em; border-radius: 8px; background: rgba(255,255,255,.08); }
.pst__lines { display: grid; gap: .45em; }
.pst__lines i { height: .55em; border-radius: 4px; background: rgba(255,255,255,.16); }
.pst__lines i:nth-child(2) { width: 82%; }
.pst__lines i:nth-child(3) { width: 64%; }
.pst__lines--big { padding: 1.2em; gap: .8em; }
.pst__lines--big i { height: .9em; }
.pst__issue { position: relative; }
.pst__issue::after { content: ""; position: absolute; inset: -4px; border-radius: 10px; border: 2px solid #FFB84D; box-shadow: 0 0 14px rgba(255,184,77,.6); opacity: 0; animation: pstIssue 6s infinite; }
.pst__issue--err::after { border-color: #FF6B7A; box-shadow: 0 0 14px rgba(255,107,122,.6); animation-delay: .9s; }
.pst__scan { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--acc) 35%, transparent)); border-bottom: 2px solid var(--acc); box-shadow: 0 6px 16px -4px var(--acc); animation: pstScan 6s ease-in-out infinite; }
.pst__checks ul { display: grid; gap: .5em; }
.pst__checks li { display: flex; align-items: center; gap: .6em; font-size: .95em; opacity: 0; animation: pstCheck 6s infinite; animation-delay: calc(var(--i) * .45s); }
.pst__checks li i { width: 1.3em; height: 1.3em; border-radius: 50%; display: grid; place-items: center; background: #1DB66B; flex: none; }
.pst__checks li i::after { content: "✓"; font-style: normal; font-size: .75em; font-weight: 800; color: #fff; }
.pst__checks li.is-warn i { background: #FFB84D; }
.pst__checks li.is-warn i::after { content: "!"; color: #3B2200; }
.pst__pill--fix { background: #FFF6E6; }

/* Secure in Cloud */
.pst__docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; padding: 1.1em; }
.pst__doc { position: relative; aspect-ratio: .78; border-radius: 8px; background: linear-gradient(170deg, #fff, #E8E1F5); color: var(--ink3); padding: .5em; display: grid; align-content: space-between; animation: pstDoc 6s var(--ease) infinite; animation-delay: calc(var(--i) * .2s); }
.pst__doc span { justify-self: start; padding: .1em .45em; border-radius: 4px; background: #C42B33; color: #fff; font-size: .7em; font-weight: 700; }
.pst__doc b { font-size: .85em; }
.pst__doc svg { position: absolute; right: .4em; bottom: .4em; width: 1.2em; fill: none; stroke: #2B0748; stroke-width: 2.4; }
.pst__shield-w { position: relative; transform-style: preserve-3d; }
.pst__orbit { position: absolute; inset: -14%; border-radius: 50%; border: 1.5px dashed color-mix(in oklab, var(--acc) 60%, transparent); transform: rotateX(72deg); animation: pstOrbit 14s linear infinite; }
.pst__orbit::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px var(--acc); }
.pst__log ul { display: grid; gap: .45em; }
.pst__log li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6em; font-size: .92em; opacity: 0; animation: pstCheck 7s infinite; animation-delay: calc(var(--i) * .6s); }
.pst__log li i { width: .7em; height: .7em; border-radius: 50%; background: var(--acc); }
.pst__log li span { color: rgba(255,255,255,.65); }
.pst__upload .pst__prog i { animation-duration: 4s; }

/* LMS */
.pst__video { position: relative; margin: 1em; aspect-ratio: 16 / 8; border-radius: 10px; background: radial-gradient(80% 90% at 30% 30%, color-mix(in oklab, var(--acc) 40%, #3A1466), #1A0634); overflow: hidden; }
.pst__play { position: absolute; left: 50%; top: 45%; width: 3.6em; height: 3.6em; margin: -1.8em 0 0 -1.8em; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 0 rgba(255,255,255,.5); animation: pstPulse 2.4s infinite; }
.pst__play::after { content: ""; position: absolute; left: 40%; top: 30%; border-style: solid; border-width: .7em 0 .7em 1.1em; border-color: transparent transparent transparent var(--ink3); }
.pst__vbar { position: absolute; left: 4%; right: 4%; bottom: 8%; height: .45em; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.pst__vbar i { display: block; height: 100%; width: 100%; background: var(--acc); transform-origin: left; animation: pstVideo 12s linear infinite; }
.pst__chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5em; padding: 0 1em 1em; }
.pst__chapters i { height: .5em; border-radius: 99px; background: rgba(255,255,255,.14); }
.pst__chapters .is-done { background: color-mix(in oklab, var(--acc) 70%, #fff); }
.pst__chapters .is-on { background: linear-gradient(90deg, var(--acc) 50%, rgba(255,255,255,.14) 50%); }
.pst__phone { position: relative; aspect-ratio: .5; border-radius: 1.8em; padding: 1.8em .9em .9em; background: linear-gradient(170deg, #F8F4FF, #E7DEF6); color: var(--ink3); box-shadow: 0 0 0 .35em #1A0634, 0 40px 70px -20px rgba(0,0,0,.8); display: grid; align-content: start; gap: .8em; font-size: clamp(8px, 1.9cqw, 13px); }
.pst__notch { position: absolute; top: .6em; left: 50%; width: 30%; height: .7em; margin-left: -15%; border-radius: 99px; background: #1A0634; }
.pst__phone .pst__ring { width: 74%; justify-self: center; }
.pst__phone .pst__ring circle { stroke: rgba(43,7,72,.12); }
.pst__phone .pst__ring .pst__ring-v { stroke: #640190; filter: none; }
.pst__phone .pst__ring-t span { color: #5E566C; }
.pst__phone ul { display: grid; gap: .45em; }
.pst__phone li { display: flex; align-items: center; gap: .5em; padding: .45em .6em; border-radius: 8px; background: #fff; font-weight: 600; }
.pst__phone li i { width: 1em; height: 1em; border-radius: 50%; border: 2px solid #C9BEDA; flex: none; }
.pst__phone li.is-done i { background: #1DB66B; border-color: #1DB66B; }
.pst__phone li.is-on { outline: 2px solid #640190; }
.pst__phone li.is-on i { border-color: #640190; border-top-color: transparent; animation: pstSpin 1.2s linear infinite; }
.pst__cert { background: linear-gradient(160deg, #FFF8E8, #FFE7B3); color: #3B2200; border-color: rgba(255,255,255,.6); }
.pst__cert .pst__k { color: #7A5300; }
.pst__cert b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.35em; margin: .2em 0; }

/* ---------- Animazioni ---------- */
@keyframes pstFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4%, 0); } }
@keyframes pstSpin { to { transform: rotate(360deg); } }
@keyframes pstTurn { 0%, 100% { transform: rotateY(-28deg) rotateX(6deg); } 50% { transform: rotateY(28deg) rotateX(-4deg); } }
@keyframes pstSway { 0%, 100% { transform: rotateY(-18deg) translateY(0); } 50% { transform: rotateY(14deg) translateY(-3%); } }
@keyframes pstPulse { 0% { box-shadow: 0 0 0 0 rgba(29,182,107,.55); } 70%, 100% { box-shadow: 0 0 0 .8em rgba(29,182,107,0); } }
@keyframes pstFill { 0% { transform: scaleX(.05); } 60%, 100% { transform: scaleX(1); } }
@keyframes pstRing { 0% { stroke-dasharray: 0 100; } 55%, 100% { stroke-dasharray: var(--v) 100; } }
@keyframes pstGrow { 0% { transform: scaleX(0); } 35%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .9; } }
@keyframes pstNow { 0% { left: 30%; } 100% { left: 92%; } }
@keyframes pstBar { 0% { transform: scaleY(.1); } 45%, 100% { transform: scaleY(1); } }
@keyframes pstDraw { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes pstStamp { 0%, 40% { transform: rotate(-6deg) scale(1.8); opacity: 0; } 55% { transform: rotate(-6deg) scale(.92); opacity: 1; } 62%, 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
@keyframes pstMove { 0%, 25% { transform: translateX(0); } 50%, 75% { transform: translateX(118%); } 100% { transform: translateX(236%); opacity: 0; } }
@keyframes pstScan { 0% { transform: translateY(-20%); } 50% { transform: translateY(380%); } 100% { transform: translateY(-20%); } }
@keyframes pstIssue { 0%, 30% { opacity: 0; } 40%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pstCheck { 0% { opacity: 0; transform: translateX(-8px); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pstDoc { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }
@keyframes pstOrbit { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes pstVideo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pst.is-paused *, .pst.is-paused *::before, .pst.is-paused *::after, .psl__slide:not(.is-active) .pst * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .pst *, .pst *::before, .pst *::after { animation: none !important; }
  .pst__stage { transition: none; }
}
@media (forced-colors: active) {
  .psl__slide { border: 2px solid CanvasText; }
  .pst { display: none; }
}