/* ==========================================================================
   Pagine progetto — stesso sistema grafico della homepage
   (usato da projects/m365-license-dashboard.html e projects/timetracker.html)
   ========================================================================== */

/* ---------- Token (palette originale del portfolio) ---------- */
:root{
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4vw,56px);
  --maxw:1320px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1);   /* ingressi */
  --ease-io:cubic-bezier(.77,0,.175,1);   /* cambio tema, passaggi tra pagine */
  /* riquadri "terminale" (diagrammi e codice): sempre scuri */
  --hw:#0b0e14; --hw-2:#121722; --hw-3:#1c2433; --hw-line:rgba(255,255,255,.08); --hw-ink:#e6e9f2; --hw-muted:#7c8499;
  --led-green:#3ecf8e; --led-blue:#4f8ef7; --led-amber:#e8b96a;
}
:root,[data-theme="dark"]{
  --bg:#0f1117; --surface:#161b26; --surface-2:#1e2535;
  --ink:#eef0f6; --muted:#8b92a8; --faint:#4a5168;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.14);
  --accent:#4f8ef7; --accent-solid:#2f6fe8; --accent-soft:rgba(79,142,247,.08); --accent-border:rgba(79,142,247,.2); --on-accent:#ffffff;
  --green:#3ecf8e; --green-soft:rgba(62,207,142,.08); --green-border:rgba(62,207,142,.18);
  --gold:#e8b96a; --gold-soft:rgba(232,185,106,.08); --gold-border:rgba(232,185,106,.18);
  --shadow:0 30px 60px -32px rgba(0,0,0,.75);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f9f8f5; --surface:#f1efe9; --surface-2:#e8e5dd;
  --ink:#141416; --muted:#5a5e6e; --faint:#9ca0ae;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.14);
  --accent:#2461e7; --accent-solid:var(--accent); --accent-soft:rgba(37,99,235,.06); --accent-border:rgba(37,99,235,.18); --on-accent:#ffffff;
  --green:#047a56; --green-soft:rgba(5,150,105,.07); --green-border:rgba(5,150,105,.2);
  --gold:#ae5008; --gold-soft:rgba(180,83,9,.07); --gold-border:rgba(180,83,9,.2);
  --shadow:0 30px 60px -32px rgba(20,20,22,.35);
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s,color .35s}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-weight:400;margin:0;text-wrap:balance}
em{font-family:var(--serif);font-style:italic;font-weight:400}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:3px}
[data-lang="en"] .it-only{display:none!important}
[data-lang="it"] .en-only{display:none!important}

.eyebrow,.mono-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:16px;font-weight:500;padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s var(--ease-out),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),filter .25s var(--ease)}
.btn-solid{background:var(--accent-solid);color:var(--on-accent)}
.btn-solid:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink)}

/* ---------- Barra in alto ---------- */
.topbar{position:sticky;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:16px var(--gutter);--cap-x:max(8px,calc(var(--gutter) - 16px))}
.topbar::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;border:1px solid transparent;border-bottom-color:var(--line);border-radius:0;
  background:var(--bg);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:top .5s var(--ease-out),bottom .5s var(--ease-out),left .5s var(--ease-out),right .5s var(--ease-out),border-radius .5s var(--ease-out),border-color .3s,box-shadow .5s var(--ease-out)}
.topbar.is-float::before{top:8px;bottom:8px;left:var(--cap-x);right:var(--cap-x);border-radius:999px;border-color:var(--line-2);box-shadow:0 18px 44px -22px rgba(0,0,0,.6)}
/* logo: tessera blu con CM e il cursore del terminale; all'apertura si disegna, col mouse sopra il cursore lampeggia */
.brand{display:inline-flex;align-items:center;border-radius:11px;text-decoration:none;line-height:0;flex:none}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cm-logo{display:block;width:36px;height:36px;overflow:visible;transition:transform .3s var(--ease-out)}
.cm-logo .lg-rim{fill:none;stroke:#fff;stroke-opacity:.14;stroke-width:1.5}
.cm-logo .lg-l{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.cm-logo .lg-cur{fill:#7fe0b4}
@keyframes lg-blink{50%{opacity:0}}
@keyframes lg-pop{from{opacity:0;transform:scale(.88)}}
@keyframes lg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){
  .cm-logo{animation:lg-pop .5s var(--ease-out) backwards}
  .cm-logo .lg-l{stroke-dasharray:1;animation:lg-draw .6s var(--ease-out) .2s backwards}
  .cm-logo .lg-m{animation-delay:.38s}
  .cm-logo .lg-cur{animation:lg-blink 1s steps(1) .9s 3}
}
@media (hover:hover) and (pointer:fine){
  .brand:hover .cm-logo{transform:translateY(-1px) rotate(-6deg)}
  .brand:hover .cm-logo .lg-cur{animation:lg-blink 1s steps(1) infinite}
}
.brand:active .cm-logo{transform:scale(.94)}
.tb-right{display:flex;align-items:center;gap:8px}
.back-link{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);text-decoration:none;font-size:14px;color:var(--muted);white-space:nowrap;transition:transform .16s var(--ease-out),color .25s var(--ease),border-color .25s var(--ease)}
.back-link:hover{color:var(--ink);border-color:var(--ink)}
.pill-btn{height:36px;min-width:36px;padding:0 12px;display:inline-grid;place-items:center;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;transition:transform .16s var(--ease-out),color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
.pill-btn:hover{border-color:var(--accent);color:var(--accent)}
.theme-btn{padding:0;width:36px}
.theme-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
[data-theme="light"] .ico-sun,[data-theme="dark"] .ico-moon{display:none}

/* ---------- Hero del progetto ---------- */
.p-hero{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,100px) var(--gutter) 0}
.p-hero .eyebrow{margin-bottom:26px}
.p-hero h1{font-family:var(--serif);font-size:clamp(56px,8.5vw,128px);line-height:.94;letter-spacing:-.025em}
.p-hero h1 em{color:var(--accent)}
.p-lede{max-width:760px;margin:30px 0 0;font-size:clamp(18px,1.6vw,21px);color:var(--muted)}
.p-hero .tags{margin-top:28px}
.p-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.facts{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);margin:64px auto 0;padding:0 var(--gutter)}
.fact{padding:22px 22px 24px 0;border-block:1px solid var(--line)}
.fact+.fact{padding-left:22px;border-left:1px solid var(--line)}
.fact span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fact b{display:block;margin-top:8px;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.05}

.p-shot{max-width:var(--maxw);margin:56px auto 0;padding:0 var(--gutter)}
.win{border-radius:16px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow);background:var(--surface)}
.win-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.win-bar i:nth-child(2){background:#febc2e}.win-bar i:nth-child(3){background:#28c840}
.win-bar span{margin-left:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.win img{width:100%;height:auto}

/* ---------- Corpo: indice + contenuto ---------- */
.p-layout{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,9vw,120px) var(--gutter) 40px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.toc{position:sticky;top:104px;align-self:start}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:flex;gap:12px;padding:7px 0 7px 16px;margin-left:-1px;border-left:1px solid transparent;text-decoration:none;font-size:14px;color:var(--muted);transition:color .2s,border-color .2s}
.toc a b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--faint);padding-top:3px}
.toc a:hover{color:var(--ink)}
.toc a.is-current{color:var(--ink);border-left-color:var(--accent)}
.toc a.is-current b{color:var(--accent)}

.p-content{min-width:0;max-width:800px}
.p-sec{padding-bottom:72px;margin-bottom:72px;border-bottom:1px solid var(--line)}
.p-sec:last-child{border-bottom:0;margin-bottom:0}
.p-sec h2{font-family:var(--serif);font-size:clamp(40px,4.6vw,64px);line-height:1;letter-spacing:-.015em;margin-bottom:26px}
.p-sec h2 em{color:var(--accent)}
.p-sec h3{font-family:var(--serif);font-size:clamp(26px,2.4vw,32px);line-height:1.1;margin:44px 0 14px}
.p-sec p{margin:0 0 18px;color:var(--muted);font-size:17px;line-height:1.8}
.p-sec strong{color:var(--ink);font-weight:500}
.p-sec a:not(.btn){color:var(--accent)}
.p-sec code{font-family:var(--mono);font-size:.84em;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);padding:1px 6px;border-radius:6px;white-space:nowrap}
.p-sec .tags{margin:0 0 16px}

/* riquadri di nota */
.note{margin:28px 0;padding:18px 22px;border-radius:16px;background:var(--accent-soft);border:1px solid var(--accent-border)}
.note-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.note p{margin:0;font-size:15.5px;line-height:1.75}
.note strong{color:var(--ink)}
.note.green{background:var(--green-soft);border-color:var(--green-border)}
.note.green .note-label{color:var(--green)}
.note.gold{background:var(--gold-soft);border-color:var(--gold-border)}
.note.gold .note-label{color:var(--gold)}

/* funzionalità */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}
.feat{padding:22px 22px 24px;border-radius:18px;background:var(--surface);border:1px solid var(--line);transition:border-color .25s,transform .4s var(--ease)}
.feat:hover{border-color:var(--accent-border);transform:translateY(-3px)}
.feat-n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:14px}
.p-sec .feat h3{font-family:var(--serif);font-size:25px;line-height:1.08;margin:0 0 10px}
.feat p{margin:0;font-size:15px;line-height:1.65}
.feat code{white-space:normal}

/* riquadri "terminale": diagrammi di architettura e codice */
.term-box{margin:28px 0;border-radius:16px;overflow:hidden;background:var(--hw);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
.term-box .win-bar{background:var(--hw-2);border-bottom:1px solid var(--hw-line)}
.term-box .win-bar span{color:var(--hw-muted)}
.term-box pre{--pp:20px;margin:0;padding:var(--pp) 22px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--hw-ink);white-space:pre}
.term-box .hl{color:#7aa7ff}
.term-box .arr{color:var(--hw-muted)}
/* codice più largo dello schermo: sfumatura a destra finché c'è altro da scorrere */
.term-box pre.has-more{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.term-box .kw{color:#7aa7ff}.term-box .str{color:#3ecf8e}.term-box .cm{color:#7c8499}.term-box .fn{color:#e8b96a}

/* cosa ho imparato */
.learn{list-style:none;margin:26px 0 0;padding:0;counter-reset:learn}
.learn li{position:relative;padding:20px 0 20px 52px;border-top:1px solid var(--line);color:var(--muted);font-size:16px;line-height:1.75;counter-increment:learn}
.learn li:last-child{border-bottom:1px solid var(--line)}
.learn li::before{content:counter(learn,decimal-leading-zero);position:absolute;left:0;top:23px;font-family:var(--mono);font-size:12px;color:var(--accent)}
.learn strong{color:var(--ink);font-weight:500}

/* sviluppi futuri */
.roadmap{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.roadmap li{position:relative;padding:14px 18px 14px 48px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:16px;line-height:1.6}
.roadmap li::before{content:"";position:absolute;left:18px;top:19px;width:12px;height:12px;border-radius:50%;border:1.5px dashed var(--accent)}

/* altro progetto */

/* ---------- Footer ---------- */

/* ---------- Cookie banner ---------- */
#cookie-banner{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);z-index:300;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:1rem 1.2rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;max-width:640px;width:calc(100% - 2rem);box-shadow:0 20px 50px -20px rgba(0,0,0,.45);animation:slideUp .35s var(--ease)}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
#cookie-banner p{font-size:13px;color:var(--muted);flex:1;min-width:200px;line-height:1.5;margin:0}
#cookie-banner p a{color:var(--accent)}
.cookie-ok{background:var(--accent-solid);color:var(--on-accent);border:0;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.cookie-ok:hover{filter:brightness(1.1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .p-layout{grid-template-columns:1fr}
  .toc{display:none}
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(3){padding-left:0;border-left:0}
  .fact:nth-child(n+3){border-top:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .feats{grid-template-columns:1fr;gap:10px}
  .feat{padding:18px 18px 20px}
  .back-link .bl-text{display:none}
  .p-layout{padding-top:64px}
  .p-sec{padding-bottom:52px;margin-bottom:52px}
  .p-sec p{font-size:16px;line-height:1.75}
  .p-sec h3{margin-top:36px}
  .note{padding:16px 18px}
  .term-box pre{--pp:16px;font-size:11px;padding:var(--pp) 14px}
  .p-sec p.cmd{font-size:12px}
  .p-hero .cmd{font-size:12px;margin-bottom:18px}
  .learn li{padding-left:36px;font-size:15.5px}
  .learn li::before{top:23px}
  .roadmap li{font-size:15.5px}
  /* pulsanti a tutta larghezza quando vanno a capo */
  .p-cta .btn,.try .btn{flex:1 1 auto;justify-content:center}
  .try .btn{display:flex}
}
@media (max-width:420px){
  /* riepilogo: resta una griglia 2×2, più compatta */
  .fact{padding:18px 12px 20px 0}
  .fact+.fact{padding-left:14px}
  .fact:nth-child(3){padding-left:0}
  .fact b{font-size:20px}
}

/* ---------- Passaggio dalla home, come un'app: l'immagine della card diventa il palco 3D, il titolo diventa il titolo;
   la home si allontana sfocandosi e questa pagina sale al suo posto. Sul telefono entra da destra. ---------- */
@view-transition{navigation:auto;types:fwd}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--ease-io)}
.next-card[href$="timetracker"] .next-shot{view-transition-name:media-timetracker;view-transition-class:vt-media}
.next-card[href$="m365-license-dashboard"] .next-shot{view-transition-name:media-dashboard;view-transition-class:vt-media}
.next-card[href$="timetracker"] b{view-transition-name:title-timetracker}
.next-card[href$="m365-license-dashboard"] b{view-transition-name:title-dashboard}
::view-transition-group(title-dashboard),::view-transition-group(title-timetracker){animation-duration:.7s;animation-timing-function:cubic-bezier(.65,0,.15,1)}
::view-transition-group(*.vt-media){animation-duration:.75s;animation-timing-function:cubic-bezier(.65,0,.15,1)}
/* l'immagine della card resta piena mentre vola, e si scioglie nel palco solo all'arrivo; i titoli si scambiano senza doppioni */
::view-transition-old(*.vt-media),::view-transition-new(*.vt-media){height:100%;object-fit:cover}
::view-transition-old(*.vt-media){animation:vt-hold .75s both}
::view-transition-new(*.vt-media){animation:vt-show .75s both}
::view-transition-old(title-dashboard),::view-transition-old(title-timetracker){animation:vt-hold-t .7s both}
::view-transition-new(title-dashboard),::view-transition-new(title-timetracker){animation:vt-show-t .7s both}
@keyframes vt-hold{0%,60%{opacity:1}100%{opacity:0}}
@keyframes vt-show{0%,45%{opacity:0}100%{opacity:1}}
@keyframes vt-hold-t{0%{opacity:1}35%,100%{opacity:0}}
@keyframes vt-show-t{0%,20%{opacity:0}70%,100%{opacity:1}}
html:active-view-transition-type(fwd)::view-transition-old(root){animation:vt-recede .5s cubic-bezier(.4,0,.2,1) both}
html:active-view-transition-type(fwd)::view-transition-new(root){animation:vt-rise .7s cubic-bezier(.22,1,.36,1) .12s both}
@keyframes vt-recede{to{opacity:0;transform:scale(.94);filter:blur(8px)}}
@keyframes vt-rise{from{opacity:0;transform:translateY(48px)}}
@media (max-width:899px){
  .pv,.next-shot{view-transition-name:none!important}
  html:active-view-transition-type(fwd)::view-transition-old(root){animation:vt-push-away .5s cubic-bezier(.32,.72,0,1) both}
  html:active-view-transition-type(fwd)::view-transition-new(root){animation:vt-push-in .5s cubic-bezier(.32,.72,0,1) both;box-shadow:-30px 0 60px rgba(0,0,0,.35)}
  @keyframes vt-push-away{to{transform:translateX(-30%);filter:brightness(.6)}}
  @keyframes vt-push-in{from{transform:translateX(100%)}}
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ==========================================================================
   Movimento — come nella homepage: ogni sezione si apre con un comando PowerShell
   che si scrive da solo, poi arriva il suo "output". Lo script aggiunge le classi
   solo se le animazioni sono attive: senza script la pagina resta com'è.
   ========================================================================== */

/* ---------- Comandi ---------- */
.cmd{font:500 14px/1.6 var(--mono);color:var(--muted);margin:0 0 22px;min-height:1.6em;overflow-wrap:anywhere}
.p-sec p.cmd{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.cmd-n{color:var(--accent);letter-spacing:.12em}
.cmd-n::after{content:"";display:inline-block;width:18px;height:1px;margin:0 10px;vertical-align:middle;background:var(--line-2)}
.cmd-ps{color:var(--accent)}
.cmd-t{color:var(--ink)}
.cmd .tok{white-space:nowrap}
.cmd-caret{display:inline-block;width:.6em;height:1.1em;vertical-align:-.2em;margin-left:2px;background:var(--accent);animation:cmd-blink 1.05s steps(1) infinite}
.cmd.is-idle .cmd-caret{opacity:0;animation:none}
@keyframes cmd-blink{50%{opacity:0}}

/* ---------- Avvio: il titolo sale dalla maschera, poi il resto dell'intestazione ---------- */
.h1-l{display:block;overflow:hidden;padding:0 .16em .1em 0;margin:0 -.16em -.1em 0}
.h1-l>span{display:block}
.boot .h1-l>span{animation:boot-line 1s var(--ease-out) both}
.boot .h1-l+.h1-l>span{animation-delay:.12s}
@keyframes boot-line{from{transform:translateY(105%)}}
.boot .p-hero .eyebrow,.boot .p-lede,.boot .p-hero .tags,.boot .p-cta,.boot .facts{animation:boot-rise .8s var(--ease-out) both}
.boot .p-lede{animation-delay:.28s}
.boot .p-hero .tags{animation-delay:.36s}
.boot .p-cta{animation-delay:.44s}
.boot .facts{animation-delay:.54s}
.boot .p-shot{animation:boot-shot 1s var(--ease-out) .62s both}
@keyframes boot-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes boot-shot{from{opacity:0;transform:translateY(40px) scale(.97)}}
/* arrivando dalla card della homepage, titolo e screenshot sono già in volo: non rientrano una seconda volta */
.vt-in .h1-l>span,.vt-in .p-shot{animation:none}

/* ---------- L'output di ogni comando entra a modo suo ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.rv.in{opacity:1;transform:none}
/* titoli: la riga si apre da una maschera (sulla riga interna, così l'osservatore vede il titolo) */
.h-in{display:block;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.p-sec h2.rv{opacity:1;transform:none}
.p-sec h2.rv .h-in{transform:translateY(.16em);clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease-out),transform .65s var(--ease-out)}
.p-sec h2.rv.in .h-in{clip-path:inset(0);transform:none}
/* funzionalità: le card arrivano a coppie */
.feat.rv{transform:translateY(16px) scale(.98)}
/* diagrammi e codice: le righe compaiono una alla volta, come l'output di un terminale */
.term-box.rv{transform:translateY(18px) scale(.985)}
.feat.rv.in,.term-box.rv.in{transform:none}
.term-box.rv pre{clip-path:inset(0 0 calc(100% - var(--pp)) 0)}
.term-box.rv.in pre{animation:pre-print calc(var(--n,12) * 26ms) steps(var(--n,12),end) .2s both}
@keyframes pre-print{from{clip-path:inset(0 0 calc(100% - var(--pp)) 0)}to{clip-path:inset(0 0 var(--pp) 0)}}
/* cosa ho imparato: come le righe del registro in homepage, il filo si traccia in colore e torna grigio */
.learn li.rv{transform:translateX(-16px)}
.learn li.rv.in{transform:none}
.learn li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none}
.learn li.ruled::after{animation:rule-draw 1.5s var(--ease-out) var(--rd,0s) both}
@keyframes rule-draw{0%{transform:scaleX(0);opacity:1}50%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
/* sviluppi futuri: il cerchio tratteggiato gira piano, come un lavoro in corso */
.roadmap li::before{animation:pending 10s linear infinite}
@keyframes pending{to{transform:rotate(360deg)}}

/* ---------- Indice: un solo segno che scivola sulla sezione che stai leggendo ---------- */
.toc ol{position:relative}
.toc ol::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:var(--toc-h,0px);background:var(--accent);opacity:0;pointer-events:none;
  transform:translateY(var(--toc-y,0px));transition:transform .5s var(--ease-out),height .5s var(--ease-out),opacity .3s var(--ease)}
.toc ol.toc-on::before{opacity:1}
.toc ol.toc-on a.is-current{border-left-color:transparent}

/* ---------- Barra di avanzamento della lettura sotto la barra in alto ---------- */
@supports (animation-timeline: scroll()){
  .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);animation:read-progress linear both;animation-timeline:scroll(root block)}
  @keyframes read-progress{to{transform:scaleX(1)}}
  .topbar::after{transition:left .5s var(--ease-out),right .5s var(--ease-out),bottom .5s var(--ease-out)}
  .topbar.is-float::after{left:calc(var(--cap-x) + 28px);right:calc(var(--cap-x) + 28px);bottom:8px;border-radius:2px}
}

/* ---------- Cambio tema: il nuovo tema si apre a cerchio dal pulsante ---------- */
html.vt-theme::view-transition-old(root),html.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-theme::view-transition-new(root){animation:theme-in .55s var(--ease-io)}
@keyframes theme-in{from{clip-path:circle(0 at var(--vt-x,100%) var(--vt-y,0))}to{clip-path:circle(var(--vt-r,150%) at var(--vt-x,100%) var(--vt-y,0))}}
html.vt-theme h1,html.vt-theme .win,html.vt-theme .pv,html.vt-theme .next b,html.vt-theme .next-shot{view-transition-name:none!important}

/* ---------- Risposta alla pressione ---------- */
.btn:active{transform:scale(.97)}
.pill-btn:active,.back-link:active{transform:scale(.94)}
@media (hover:none){.btn-solid:hover{transform:none;filter:none}}

/* ---------- Luce che segue il cursore sulle card delle funzionalità ---------- */
@media (hover:hover) and (pointer:fine){
  .feat{position:relative}
  .feat>*{position:relative}
  .feat::before,.feat::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
  .feat::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 14%,transparent),transparent 65%)}
  .feat::after{padding:1px;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),var(--accent),transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .feat:hover::before,.feat:hover::after{opacity:1}
}

/* ==========================================================================
   Demo dal vivo: sotto lo screenshot un pulsante trasforma la finestra nell'app vera,
   in modalità demo (copie in /demo/, senza collegamenti a Microsoft). Su telefono si apre a tutto schermo.
   ========================================================================== */
.win{position:relative}
.shot-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.shot-note{margin:0 0 0 4px;font:12px var(--mono);letter-spacing:.04em;color:var(--muted)}
/* passando sopra lo screenshot compare "Prova", e lo screenshot si scurisce un poco */
.win img{transition:filter .35s var(--ease)}
.win-play{position:absolute;left:50%;top:calc(50% + 18px);z-index:2;display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;border:0;cursor:pointer;
  background:var(--accent);color:var(--on-accent);font:500 16px var(--sans);box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
  opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .win:not(.is-live):hover img{filter:brightness(.55) saturate(.9)}
  .win:not(.is-live):hover .win-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .win:not(.is-live) img{cursor:pointer}
}
.win-play:active{transform:translate(-50%,-50%) scale(.97)}
.win.is-live .win-play{display:none}
.demo-frame{display:block;width:100%;height:min(820px,84vh);border:0;background:var(--surface)}
.win.is-live{box-shadow:0 0 0 1px var(--accent-border),var(--shadow)}
@media (max-width:760px){.shot-cta .btn{flex:1 1 auto;justify-content:center}.shot-note{margin:0;width:100%;text-align:center}}

/* ==========================================================================
   "Come funziona" dal vivo: la richiesta viaggia tra i componenti come in una sala server.
   Dati del diagramma in un <script type="application/json"> dentro .flow, logica in /assets/js/flow.js
   ========================================================================== */
.flow{--req:#4f8ef7;--res:#3ecf8e;--store:#e8b96a;--err:#f2615a;
  margin:28px 0 12px;border-radius:16px;overflow:hidden;background:var(--hw);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 50px -30px rgba(0,0,0,.7);color:var(--hw-ink)}
.flow .win-bar{background:var(--hw-2);border-bottom:1px solid var(--hw-line)}
.flow .win-bar span{color:var(--hw-muted)}
.flow-tools{margin-left:auto;display:flex;gap:6px}
.flow-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--hw-line);background:transparent;color:var(--hw-ink);font:500 11px/1 var(--mono);letter-spacing:.04em;cursor:pointer;transition:border-color .16s,background-color .16s,transform .14s var(--ease-out)}
.flow-btn:hover{border-color:rgba(79,142,247,.45);background:rgba(79,142,247,.08)}
.flow-btn:active{transform:scale(.97)}
.flow-btn:disabled{opacity:.45;cursor:default;transform:none}
.flow-btn svg{width:11px;height:11px;fill:currentColor}
.flow-btn[aria-pressed="true"]{border-color:rgba(242,97,90,.5);background:rgba(242,97,90,.1);color:#ffb4af}

/* il "pavimento" della sala: griglia di puntini */
.flow-stage{position:relative;display:grid;gap:56px 44px;padding:34px 30px 30px;
  background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px) 0 0/18px 18px}
.flow-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.flow-wires line{stroke:rgba(255,255,255,.12);stroke-width:1.5;stroke-dasharray:3 5;transition:stroke .3s}
.flow-wires line.is-hot{stroke:rgba(79,142,247,.55);stroke-dasharray:none}

/* i componenti: unità da rack, con il LED; icona sopra e testo centrato (4 in fila stanno anche in colonne strette) */
.flow-node{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;min-width:0;padding:14px 10px 13px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,#151b27,#10151f);border:1px solid var(--hw-line);color:inherit;font:inherit;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .25s,box-shadow .25s,transform .2s var(--ease-out)}
.flow-node:hover,.flow-node:focus-visible,.flow-node.is-sel{border-color:rgba(79,142,247,.4)}
.flow-node:focus-visible{outline:2px solid var(--req);outline-offset:3px}
.flow-ico{display:grid;place-items:center;width:34px;height:34px;margin-bottom:9px;border-radius:9px;background:#1c2433;color:#9db8ff;transition:background-color .2s,color .2s}
.flow-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flow-t{max-width:100%;font:500 13px/1.25 var(--sans);color:var(--hw-ink);text-wrap:balance}
.flow-s{max-width:100%;margin-top:3px;font:400 10.5px/1.35 var(--mono);color:var(--hw-muted);text-wrap:balance;overflow-wrap:anywhere}
.flow-led{position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;background:#2a3344;transition:background-color .2s,box-shadow .2s}
.flow-node.is-on .flow-led{background:var(--res);box-shadow:0 0 8px var(--res)}
.flow-node.is-hit{border-color:var(--hit,var(--req));box-shadow:0 0 0 1px var(--hit,var(--req)),0 0 28px -6px var(--hit,var(--req)),inset 0 1px 0 rgba(255,255,255,.05)}
.flow-node.is-hit .flow-ico{color:#fff;background:var(--hit,var(--req))}
.flow-node.is-down{border-color:rgba(242,97,90,.55)}
.flow-node.is-down .flow-led{background:var(--err);box-shadow:0 0 8px var(--err);animation:flow-blink .7s steps(1) infinite}
.flow-node.is-down .flow-ico{color:#ffb4af;background:rgba(242,97,90,.15)}
.flow-node.is-down .flow-t{text-decoration:line-through;text-decoration-color:rgba(242,97,90,.7)}
@keyframes flow-blink{50%{opacity:.2}}

/* il pacchetto che viaggia sui cavi */
.flow-pkt{position:absolute;left:0;top:0;z-index:2;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c,var(--req));box-shadow:0 0 0 3px rgba(255,255,255,.06),0 0 14px 2px var(--c,var(--req));pointer-events:none}

/* sotto: registro dei passaggi e dettaglio del componente */
.flow-foot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border-top:1px solid var(--hw-line)}
.flow-log{margin:0;padding:14px 18px;min-height:178px;max-height:178px;overflow:hidden;list-style:none;font:12px/1.7 var(--mono);display:flex;flex-direction:column;justify-content:flex-end}
.flow-log li{display:grid;grid-template-columns:auto auto 1fr;gap:8px;color:var(--hw-ink);animation:flow-line .25s var(--ease-out) both}
.flow-log li time{color:#4a5168;font-variant-numeric:tabular-nums}
.flow-log li b{font-weight:500;color:var(--k,var(--req))}
.flow-log li.is-hint{grid-template-columns:1fr;color:var(--hw-muted)}
.flow-log li.is-done{color:var(--res)}
@keyframes flow-line{from{opacity:0;transform:translateY(4px)}}
.flow-info{padding:14px 18px;border-left:1px solid var(--hw-line);font-size:13px;line-height:1.6;color:var(--hw-muted)}
.flow-info b{display:block;margin-bottom:4px;font:500 12px var(--mono);letter-spacing:.04em;color:var(--hw-ink)}
.flow-info p{margin:0;font-size:13px!important;line-height:1.6!important;color:var(--hw-muted)}

/* la versione testuale resta disponibile (stampa, lettori di schermo, chi la preferisce) */
.flow-alt{margin:0 0 28px}
.flow-alt summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:12px var(--mono);letter-spacing:.04em;color:var(--muted);list-style:none}
.flow-alt summary::-webkit-details-marker{display:none}
.flow-alt summary::before{content:"▸";transition:transform .2s var(--ease-out)}
.flow-alt[open] summary::before{transform:rotate(90deg)}
.flow-alt summary:hover{color:var(--ink)}
.flow-alt .term-box{margin-top:14px}

@media (max-width:760px){
  .flow-stage{gap:30px 22px;padding:22px 16px}
  .flow-node{padding:10px 11px}
  .flow-ico{width:30px;height:30px}
  .flow-foot{grid-template-columns:1fr}
  .flow-info{border-left:0;border-top:1px solid var(--hw-line)}
  .flow-log{min-height:150px;max-height:150px;font-size:11px;padding:12px 14px}
  .flow-btn .flow-lbl{display:none}
}
@media print{.flow{display:none}.flow-alt{display:block}.flow-alt>*{display:block}}
/* i pulsanti stanno nella barra della finestra: non prendono lo stile delle sue etichette */
.flow .win-bar .flow-btn span{margin:0;color:inherit;font:inherit;letter-spacing:inherit}
.flow-info p{margin:0!important}

/* ---------- Hero con anteprima 3D: i pezzi dell'app, con i dati veri, fluttuano a destra del titolo ----------
   .pv = contenitore (si allontana scorrendo), .pv-stage = palco 3D inclinato dal mouse, .pv-card = un pezzo dell'app.
   Il palco è disegnato a 560x520 e lo script lo scala (--pv-s) alla larghezza disponibile. */
.p-hero.has-pv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:clamp(24px,4vw,64px);align-items:start}
.p-hero.has-pv>*{grid-column:1}
.p-hero.has-pv h1{font-size:clamp(52px,6.6vw,108px)}
.pv{grid-column:2!important;grid-row:1 / span 8;align-self:center;position:relative;height:calc(520px * var(--pv-s,1));pointer-events:none}
.pv-stage{position:absolute;left:50%;top:0;width:560px;height:520px;margin-left:-280px;transform-origin:50% 0;transform-style:preserve-3d;perspective:1300px}
.pv-rot{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 0;transform:scale(var(--pv-s,1))}
.pv-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.pv-glow{position:absolute;inset:40px 30px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 20%,transparent),transparent);filter:blur(10px);transform:translateZ(-120px)}
.pv-grid{position:absolute;inset:0;border-radius:24px;background:radial-gradient(circle at 1px 1px,var(--line-2) 1px,transparent 1.6px) 0 0/20px 20px;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);transform:translateZ(-80px)}
.pv-card{position:absolute;display:grid;gap:6px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--hw-2) 96%,transparent);border:1px solid var(--hw-line);color:var(--hw-ink);
  font:500 11px/1.4 var(--mono);box-shadow:0 34px 60px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);transform:translateZ(var(--z,0px))}
.pv-k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hw-muted)}
.pv-n{font-size:30px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pv-s{font-size:10px;color:var(--hw-muted)}
.pv-ok{color:var(--led-green)}.pv-warn{color:var(--led-amber)}.pv-bad{color:#f2615a}.pv-acc{color:var(--led-blue)}
.pv-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid var(--hw-line);font-size:10px;color:var(--hw-muted)}
.pv-row b{font-weight:500}
.pv-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;white-space:nowrap}
.pv-dot{width:7px;height:7px;border-radius:50%;background:var(--led-green);box-shadow:0 0 10px var(--led-green)}
.pv-ring{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.pv-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.pv-bar{height:5px;border-radius:3px;background:var(--hw-3);overflow:hidden}
.pv-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--c,var(--led-blue));transform-origin:0 50%;transform:scaleX(0)}
.pv-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end;height:96px;margin-top:4px}
.pv-day{display:flex;flex-direction:column-reverse;gap:3px;height:100%}
.pv-day i{display:block;border-radius:4px;height:var(--h);background:var(--c,var(--led-blue));transform-origin:50% 100%;transform:scaleY(0)}
.pv-cal-l{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center;font-size:9.5px;color:var(--hw-muted)}
/* i pezzi arrivano dal fondo uno dopo l'altro, poi fluttuano; anelli, linee e barre si disegnano */
.pv.is-in .pv-ring,.pv.is-in .pv-line{animation:pv-draw 1.3s cubic-bezier(.23,1,.32,1) calc(var(--d,0s) + .45s) forwards}
.pv.is-in .pv-bar i{animation:pv-bar 1.1s cubic-bezier(.23,1,.32,1) calc(var(--d,0s) + .4s) forwards}
.pv.is-in .pv-day i{animation:pv-day .7s cubic-bezier(.34,1.3,.64,1) calc(var(--d,0s) + .3s + var(--j,0) * 60ms) forwards}
@keyframes pv-draw{to{stroke-dashoffset:var(--to,0)}}
@keyframes pv-bar{to{transform:scaleX(1)}}
@keyframes pv-day{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:no-preference){
  .pv-card{opacity:0;scale:.86}
  .pv.is-in .pv-card{animation:pv-in .95s cubic-bezier(.23,1,.32,1) var(--d,0s) forwards,pv-float 7s ease-in-out calc(var(--d,0s) + 1s) infinite alternate}
  @keyframes pv-in{from{opacity:0;scale:.86;filter:blur(6px)}to{opacity:1;scale:1;filter:blur(0)}}
  @keyframes pv-float{from{translate:0 0}to{translate:0 var(--fy,-8px)}}
  @supports (animation-timeline: view()){
    .pv-rot{animation:pv-away linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
    @keyframes pv-away{to{transform:scale(calc(var(--pv-s,1) * .9)) translateY(-40px);opacity:.35}}
  }
}
@media (prefers-reduced-motion:reduce){
  .pv-ring,.pv-line{stroke-dashoffset:var(--to,0)}
  .pv-bar i,.pv-day i{transform:none}
}
@media (max-width:1100px){
  .p-hero.has-pv{display:block}
  /* il palco è largo 560px e viene rimpicciolito: senza questo il suo riquadro sborda e il telefono rimpicciolisce tutta la pagina */
  .pv{height:calc(520px * var(--pv-s,1));margin-top:48px;overflow:clip;overflow-clip-margin:12px}
  .p-hero.has-pv h1{font-size:clamp(52px,8.5vw,108px)}
}

/* ---------- Stack tecnico a strati: una torre isometrica (le lastre si separano entrando) e una card per strato ----------
   La lastra dello strato che stai leggendo si solleva e si accende del suo colore (classe .is-on dallo script). */
@property --sep{syntax:'<number>';inherits:true;initial-value:1}
.stk{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:30px;align-items:start}
.stk-tower{position:sticky;top:110px;height:450px}
.stk-iso{position:absolute;left:50%;bottom:30px;width:0;height:0;transform-style:preserve-3d}
.slab{position:absolute;left:-74px;top:-74px;width:148px;height:148px;border-radius:16px;display:grid;place-items:end center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 34%,var(--hw-2)),var(--hw-2) 75%);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  box-shadow:1px 1px 0 color-mix(in srgb,var(--c) 30%,#0b0e14),2px 2px 0 color-mix(in srgb,var(--c) 28%,#0b0e14),3px 3px 0 color-mix(in srgb,var(--c) 26%,#0b0e14),
    4px 4px 0 color-mix(in srgb,var(--c) 24%,#0b0e14),5px 5px 0 color-mix(in srgb,var(--c) 22%,#0b0e14),6px 6px 0 color-mix(in srgb,var(--c) 20%,#0b0e14),
    7px 7px 0 color-mix(in srgb,var(--c) 18%,#0b0e14),8px 8px 0 color-mix(in srgb,var(--c) 16%,#0b0e14),14px 14px 24px rgba(0,0,0,.45);
  transform:translateY(calc((var(--n) - 1 - var(--i)) * -1 * (22px + var(--sep) * 50px) - var(--lift,0px))) rotateX(58deg) rotateZ(-45deg);
  transition:transform .55s var(--ease-out),border-color .3s,filter .3s;filter:saturate(.75) brightness(.9)}
.slab span{font:600 11px var(--mono);letter-spacing:.06em;color:var(--hw-ink);text-transform:uppercase;text-align:center;padding:0 12px 13px;line-height:1.25;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.slab.is-on{--lift:18px;filter:none;border-color:var(--c)}
.slab.is-on::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 1px var(--c),0 0 34px color-mix(in srgb,var(--c) 55%,transparent);pointer-events:none}
.stk-cards{display:grid;gap:14px}
.stk-l{position:relative;padding:20px 22px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.stk-l::before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--c);opacity:.35;transition:opacity .3s}
.stk-l.is-on{border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:0 18px 40px -28px color-mix(in srgb,var(--c) 70%,transparent)}
.stk-l.is-on::before{opacity:1}
.stk-n{position:absolute;right:18px;top:18px;font:500 11px var(--mono);color:var(--c)}
.stk-l h3{margin-top:0!important}
.stk-l p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .stk-iso{animation:stk-sep linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    @keyframes stk-sep{from{--sep:0}to{--sep:1}}
  }
}
@media (prefers-reduced-motion:reduce){.slab{transition:none}}
@media (max-width:900px){
  .stk{grid-template-columns:1fr}
  .stk-tower{position:relative;top:0;height:380px;margin:-10px 0 0}
  .stk-iso{transform:scale(.86)}
}

/* ---------- Funzionalità a bento: la prima card è grande, l'ultima si allarga se resta sola; ogni card ha un'icona che si disegna ---------- */
.feats>.feat:first-child{grid-column:1/-1;padding:28px 30px 30px}
.feats>.feat:first-child h3{font-size:clamp(28px,3vw,36px)}
.feats>.feat:last-child:nth-child(even){grid-column:1/-1}
.feat{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;align-content:start}
.feat>.feat-n{grid-column:1/-1}
.feat:not(:has(.feat-ic)){display:block}
.feat>h3,.feat>p{grid-column:2}
.feat-ic{grid-column:1;grid-row:2 / span 3;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-border);transition:transform .45s cubic-bezier(.34,1.5,.64,1),background-color .25s,color .25s}
.feats>.feat:first-child .feat-ic{width:56px;height:56px;border-radius:15px}
.feat-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feats>.feat:first-child .feat-ic svg{width:28px;height:28px}
.feat-ic path{stroke-dasharray:1;stroke-dashoffset:0}
.feat.ic-wait .feat-ic path{stroke-dashoffset:1}
.feat.ic-draw .feat-ic path{transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .15s;stroke-dashoffset:0}
@media (hover:hover) and (pointer:fine){
  .feat:hover .feat-ic{transform:translateY(-3px) rotate(-8deg) scale(1.06);background:var(--accent);color:var(--on-accent,#fff)}
}
@media (max-width:760px){.feats>.feat:first-child{padding:20px 18px 22px}.feat{grid-template-columns:1fr}.feat>h3,.feat>p{grid-column:1}.feat-ic,.feats>.feat:first-child .feat-ic{grid-row:auto;width:38px;height:38px;margin-bottom:14px}}
/* ---------- Sviluppi futuri come board stile Planner: intestazione Backlog e attività con il cerchio da spuntare ---------- */
.board{margin-top:22px;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--surface) 60%,transparent);border:1px solid var(--line)}
.board-h{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.board-t{color:var(--ink)}
.board-c{padding:2px 9px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);font-size:11px}
.board-add{margin-left:auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:1px dashed var(--line-2);color:var(--muted);font-size:15px}
.board .roadmap{margin:0;gap:8px}
.board .roadmap li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--surface);box-shadow:0 1px 0 var(--line);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.board .roadmap li::before{display:none}
.rm-check{flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:border-color .2s,background-color .2s}
.rm-check svg{width:12px;height:12px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
@media (hover:hover) and (pointer:fine){
  .board .roadmap li:hover{transform:translateY(-2px);border-color:var(--accent-border);box-shadow:0 14px 30px -22px rgba(0,0,0,.6)}
  .board .roadmap li:hover .rm-check{border-color:var(--accent)}
  .board .roadmap li:hover .rm-check svg{opacity:.55}
}
@media (prefers-reduced-motion:no-preference){
  .board.rm-wait .roadmap li{opacity:0;transform:translateY(12px)}
  .board.rm-in .roadmap li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--k) * 90ms)}
}

/* ---------- Altro progetto: una grande card con l'anteprima dell'altra app, che si raddrizza e scorre al passaggio ---------- */
.next{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.next-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,48px);margin:24px 0 8px;border-radius:24px;
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;overflow:hidden;transition:border-color .3s var(--ease),box-shadow .5s var(--ease)}
.next-txt{display:grid;gap:14px;justify-items:start}
.next .mono-label{margin:0}
.next b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,68px);line-height:1;letter-spacing:-.02em;transition:color .3s}
.next-desc{color:var(--muted);font-size:16px;line-height:1.6;max-width:44ch}
.next-go{display:inline-flex;align-items:center;gap:14px;margin-top:8px;font-weight:500}
.next-arrow{flex-shrink:0;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);font-size:20px;transition:transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),color .35s}
.next-shot{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:var(--hw);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  transform:perspective(1100px) rotateY(-10deg) rotateX(4deg) rotate(1.5deg);transition:transform .8s var(--ease)}
.next-shot .win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--hw-2);border-bottom:1px solid var(--hw-line);font:11px var(--mono);color:var(--hw-muted)}
.next-shot .win-bar i{width:8px;height:8px;border-radius:50%;background:#3a4256}
.next-shot .win-bar i:nth-child(1){background:#f2615a}.next-shot .win-bar i:nth-child(2){background:#e8b96a}.next-shot .win-bar i:nth-child(3){background:#3ecf8e}
.next-shot .win-bar span{margin-left:8px}
.next-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;transition:object-position 3s cubic-bezier(.45,0,.55,1)}
@media (hover:hover) and (pointer:fine){
  .next-card:hover{border-color:var(--accent-border);box-shadow:var(--shadow)}
  .next-card:hover b{color:var(--accent)}
  .next-card:hover .next-arrow{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--on-accent);transform:rotate(-45deg)}
  .next-card:hover .next-shot{transform:perspective(1100px) rotateY(0) rotateX(0) rotate(0) translateY(-6px)}
  .next-card:hover .next-shot img{object-position:100% 100%}
}
.next-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (max-width:900px){.next-card{grid-template-columns:1fr}.next-shot{transform:none}}
/* ---------- Footer come in homepage: logo e link, il nastro delle tecnologie del progetto, PS> Exit e torna su ---------- */
.footer{display:block;padding:0;border-top:1px solid var(--line);color:var(--muted);font-size:14px;overflow:hidden;margin-top:56px}
.ft-top{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:40px var(--gutter) 22px}
.ft-top .cm-logo{width:42px;height:42px}
.ft-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.footer a{text-decoration:none;color:var(--muted);transition:color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.footer a:hover{color:var(--ink)}}
.ft-marquee{position:relative;overflow:hidden;padding:4px 0 14px;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq-set{display:flex;align-items:center;flex:none}
.mq-i{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.4vw,96px);line-height:1.08;letter-spacing:-.02em;white-space:nowrap;padding:0 .22em;
  color:transparent;background:linear-gradient(180deg,var(--ink) 25%,color-mix(in srgb,var(--ink) 18%,transparent) 100%);-webkit-background-clip:text;background-clip:text}
.mq-i:nth-child(4n+3){font-style:italic}
.mq-sep{flex:none;width:.42em;font-size:clamp(40px,6.4vw,96px);text-align:center;color:var(--accent);opacity:.7;line-height:1}
.mq-sep::before{content:"✦";font-size:.32em;vertical-align:middle}
@media (hover:hover) and (pointer:fine){.mq-i:hover{background:linear-gradient(180deg,#7fb0ff,var(--accent));-webkit-background-clip:text;background-clip:text}}
.ft-bottom{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px var(--gutter) 24px;border-top:1px solid var(--line);font-size:13px}
.ft-exit{font:12px var(--mono);color:var(--muted)}
.ft-exit .cp-ps{color:var(--accent)}
.ft-exit b{font-weight:500;color:var(--ink)}
.to-top{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)!important;transition:border-color .25s var(--ease),transform .16s var(--ease-out)}
.to-top svg{position:absolute;inset:-1px;width:48px;height:48px;transform:rotate(-90deg)}
.to-top circle{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
@supports (animation-timeline: scroll()){.to-top circle{animation:ring-fill linear both;animation-timeline:scroll(root block)}}
@keyframes ring-fill{to{stroke-dashoffset:0}}
.to-top span{transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.to-top:hover{border-color:var(--accent)}.to-top:hover span{transform:translateY(-3px)}}
.to-top:active{transform:scale(.94)}
.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}
@media (max-width:760px){.ft-bottom{flex-direction:column-reverse;align-items:flex-start}}