/* Home di artiko.ai (17/10/2026): ispirata al linguaggio morbido che Lorenzo ha scelto (tessere con angoli grandi,
   ombre lunghe, costellazione collegata da linee, colonne che scorrono ai lati, card con mini interfacce).
   Tutto dai token di site.css; chiaro di base, scuro con [data-theme="dark"]. Le animazioni partono da sole (CSS)
   o quando la sezione è in vista (home.js); con prefers-reduced-motion resta tutto fermo e visibile. */

/* ---------- hero: costellazione + titolo ---------- */
.h-hero { padding: 100px 0 72px; position: relative; overflow: hidden; isolation: isolate; }
.h-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 110px; width: 900px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--artiko) 26%, transparent), transparent); filter: blur(10px); pointer-events: none; }

.cst { position: relative; height: 340px; max-width: 1240px; margin: 0 auto; --k: .9; }
.cst-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.cst-lines .ln { fill: none; stroke: var(--line-soft); stroke-width: 1.4; }
.cst-lines .el { fill: var(--artiko); stroke: var(--paper); stroke-width: 3; opacity: 0; animation: dotIn .5s var(--ease) forwards; }
.cst-lines .pulse { opacity: 0; }

.cst .node { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * var(--k)); height: calc(var(--s) * var(--k));
  transform: translate(-50%, -50%); z-index: 2; text-decoration: none; color: var(--text); border-radius: 28%; }
.cst .node .in { position: relative; display: block; width: 100%; height: 100%;
  animation: cstIn .9s var(--ease) var(--d, 0s) both, cstFloat var(--f, 7s) ease-in-out calc(var(--d, 0s) + .9s) infinite alternate; }
.cst .node .sq { transition: transform .35s var(--ease); }
.cst .node:hover .sq, .cst .node:focus-visible .sq { transform: translateY(-4px) scale(1.04); }
.cst .lbl { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); font-size: 13.5px; font-weight: 700;
  color: var(--muted); white-space: nowrap; letter-spacing: -.005em; transition: color .2s; }
.cst .node:hover .lbl { color: var(--text); }
.cst .node.hub { --x: 50%; --y: 46%; --s: 168px; --d: 0s; --f: 9s; --acc: var(--artiko); --acc-deep: var(--artiko-deep); z-index: 3; }
.cst .node.hub .sq { border-radius: 30%; }
.cst .node.hub .in::before { content: ""; position: absolute; inset: -38%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--artiko) 38%, transparent), transparent); animation: halo 6s ease-in-out infinite; }
.cst .node[data-prodotto="net"]          { --x: 10%; --y: 52%; --s: 120px; --d: .12s; --f: 7s; }
.cst .node[data-prodotto="plans"]        { --x: 24%; --y: 15%; --s: 96px;  --d: .22s; --f: 6s; }
.cst .node[data-prodotto="dolly"]        { --x: 27%; --y: 80%; --s: 108px; --d: .32s; --f: 8s; }
.cst .node[data-prodotto="hosting"]      { --x: 74%; --y: 17%; --s: 108px; --d: .27s; --f: 6.6s; }
.cst .node[data-prodotto="element-node"] { --x: 90%; --y: 50%; --s: 116px; --d: .17s; --f: 7.6s; }
.cst .node[data-prodotto="yourside"]     { --x: 76%; --y: 82%; --s: 92px;  --d: .37s; --f: 6.2s; }

@keyframes cstIn { from { opacity: 0; transform: translateY(18px) scale(.86); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cstFloat { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: .6; } }
@keyframes dotIn { from { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); } to { opacity: 1; transform-box: fill-box; transform-origin: center; transform: scale(1); } }

.h-copy { text-align: center; max-width: 980px; margin: 22px auto 0; display: grid; justify-items: center; gap: 0; }
.h-copy > * { animation: rise .9s var(--ease) both; }
.h-copy > :nth-child(1) { animation-delay: .35s; } .h-copy > :nth-child(2) { animation-delay: .43s; }
.h-copy > :nth-child(3) { animation-delay: .51s; } .h-copy > :nth-child(4) { animation-delay: .59s; } .h-copy > :nth-child(5) { animation-delay: .67s; }
.h-copy .kicker { color: var(--artiko-deep); }
.h-copy h1 { font-size: clamp(38px, 5.4vw, 76px); letter-spacing: -.045em; line-height: .98; max-width: 15ch; color: var(--ink); }
.h-copy .lead { margin-top: 18px; max-width: 66ch; font-size: clamp(17px, 1.4vw, 20px); }
.h-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.h-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
:root[data-theme="dark"] .h-copy .kicker { color: var(--artiko); }

@media (max-width: 1100px) { .cst { --k: .76; height: 340px; } }
@media (max-width: 760px) {
  .h-hero { padding: 96px 0 56px; }
  .cst { --k: .54; height: 400px; }
  .cst .node.hub { --y: 47%; }
  .cst .node[data-prodotto="plans"]        { --x: 50%; --y: 9%; }
  .cst .node[data-prodotto="net"]          { --x: 15%; --y: 28%; }
  .cst .node[data-prodotto="hosting"]      { --x: 85%; --y: 28%; }
  .cst .node[data-prodotto="dolly"]        { --x: 15%; --y: 70%; }
  .cst .node[data-prodotto="yourside"]     { --x: 85%; --y: 70%; }
  .cst .node[data-prodotto="element-node"] { --x: 50%; --y: 86%; }
  .cst .lbl { font-size: 12px; top: calc(100% + 8px); }
  .h-copy { margin-top: 28px; }
}

/* ---------- un solo account: colonne che scorrono ai lati ---------- */
.h-acc { position: relative; overflow: hidden; padding: 120px 0 72px; min-height: 760px; display: grid; align-items: center; }
.h-acc-copy { position: relative; z-index: 2; max-width: 600px; text-align: center; display: grid; justify-items: center; }
.h-acc-copy h2 { font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -.04em; line-height: 1.02; color: var(--ink); }
.h-acc-copy .kicker { color: var(--artiko-deep); margin-top: 22px; }
.h-acc-copy .lead { margin: 18px 0 30px; }
:root[data-theme="dark"] .h-acc-copy .kicker { color: var(--artiko); }
.acc-tile { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--card); color: var(--artiko-deep);
  border: 1px solid var(--line-2); box-shadow: var(--tile-shadow); }
.acc-tile svg { width: 40px; height: 40px; }
:root[data-theme="dark"] .acc-tile { color: var(--artiko); }

.side { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; pointer-events: none; }
.side-l { left: 0; } .side-r { right: 0; }
.col { position: absolute; top: 50%; display: flex; flex-direction: column; gap: 22px; }
.frag { will-change: transform, opacity; transform-origin: 50% 50%; }
.side-l .c-in  { left: calc(100% - 300px - 250px); margin-top: -330px; }
.side-l .c-out { left: calc(100% - 300px - 250px - 230px); margin-top: -250px; }
.side-r .c-in  { right: calc(100% - 300px - 250px); margin-top: -300px; }
.side-r .c-out { right: calc(100% - 300px - 250px - 230px); margin-top: -360px; }

.frag { width: 236px; background: var(--card); border: 1px solid var(--line-2); border-radius: 22px; padding: 14px 15px 15px; box-shadow: var(--tile-shadow);
  display: grid; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--text); }
.frag small { font-size: 12px; color: var(--muted); }
.f-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.f-head b { font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.f-head > span { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-head .dot { width: 8px; height: 8px; }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #101827; background: var(--c, var(--acc)); flex: none; }
.f-msg { display: flex; gap: 8px; align-items: flex-end; }
.f-msg p { background: var(--paper); border-radius: 14px 14px 14px 5px; padding: 8px 11px; }
.f-msg.me { justify-content: flex-end; }
.f-msg.me p { background: var(--acc); color: #101827; border-radius: 14px 14px 5px 14px; }
.f-msg.bot p { background: color-mix(in srgb, var(--acc) 22%, var(--card)); border-radius: 14px 14px 14px 5px; }
.f-typing { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.dots, .typing { display: inline-flex; gap: 3px; }
.dots i, .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.dots i:nth-child(2), .typing i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3), .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: color-mix(in srgb, #1f8f4d 14%, var(--card)); color: #1f8f4d; }
.pill.dolly { background: color-mix(in srgb, var(--acc) 24%, var(--card)); color: var(--acc-deep); margin-left: auto; }
:root[data-theme="dark"] .pill.ok { color: #5fd68a; }
.f-site { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.f-site b { font-weight: 700; color: var(--ink); }
.f-spark { width: 100%; height: 44px; }
.f-spark .area, .ms-host .area { fill: color-mix(in srgb, var(--acc) 30%, transparent); }
.f-spark .ln, .ms-host .ln { fill: none; stroke: var(--acc-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.f-bar { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.f-bar span { display: block; height: 100%; border-radius: inherit; background: var(--acc); }
.f-code { font-size: 26px; font-weight: 800; letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.f-wait { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 60%, transparent); animation: live 1.8s infinite; flex: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.f-gantt { display: grid; gap: 9px; }
.f-gantt div { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.f-gantt i { position: relative; height: 10px; border-radius: 99px; background: var(--line-2); }
.f-gantt i::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 99px; background: color-mix(in srgb, var(--acc) 55%, var(--card)); }
.f-gantt i.hi::after { background: var(--acc); }
.f-page { display: grid; gap: 7px; padding: 10px; border-radius: 14px; background: var(--paper); }
.f-page .blk { display: block; height: 16px; border-radius: 6px; background: var(--line-2); }
.f-page .blk.b-hero { height: 34px; background: color-mix(in srgb, var(--acc) 40%, var(--card)); }
.f-page .two { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.f-page .blk.b-btn { width: 44%; height: 14px; background: var(--acc); }
.f-btn { justify-self: end; padding: 6px 12px; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 12px; }
.f-call { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.f-call div { position: relative; height: 62px; border-radius: 12px; background: color-mix(in srgb, var(--c) 30%, var(--paper)); display: grid; place-items: center; }
.f-call span { width: 30px; height: 30px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #101827; }
.f-call small { position: absolute; left: 7px; bottom: 4px; font-size: 10px; color: var(--text); }
.f-call .speak { box-shadow: inset 0 0 0 2px var(--acc-deep); }
.f-ctrl { display: flex; justify-content: center; gap: 8px; }
.f-ctrl i { width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-2); }
.f-ctrl i.end { background: #e5484d; border-color: #e5484d; width: 34px; border-radius: 99px; }
.f-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.f-tasks li { display: flex; align-items: center; gap: 8px; }
.f-tasks li::before { content: ""; width: 14px; height: 14px; border-radius: 5px; border: 1.5px solid var(--line); flex: none; }
.f-tasks li.ok { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.f-tasks li.ok::before { background: var(--acc); border-color: var(--acc); }

@media (max-width: 1080px) {
  .h-acc { display: flex; flex-direction: column; gap: 40px; padding: 72px 0; min-height: 0; }
  .side { position: static; width: auto; display: flex; gap: 16px; justify-content: center; will-change: transform; }
  .side-l { order: 0; } .h-acc-copy { order: 1; } .side-r { order: 2; }
  .col { position: static; margin: 0 !important; flex-direction: row; gap: 16px; display: contents; }
  .frag { width: 220px; flex: none; }
}

/* ---------- vetrina dei prodotti ---------- */
.h-prod { padding: 64px 0 72px; }
.h-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.h-head h2 { font-size: clamp(30px, 4vw, 52px); letter-spacing: -.04em; line-height: 1.04; color: var(--ink); }
.h-head .kicker { color: var(--artiko-deep); }
.h-head p:last-child { margin-top: 14px; color: var(--muted); font-size: 18px; }
:root[data-theme="dark"] .h-head .kicker { color: var(--artiko); }
.showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1040px) { .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .showcase { grid-template-columns: 1fr; } }
.pcard { display: grid; grid-template-rows: auto 1fr; background: var(--card); border: 1px solid var(--line-2); border-radius: 28px; padding: 10px;
  box-shadow: var(--soft-shadow); text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease); min-width: 0; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(16, 24, 39, .05), 0 34px 70px -34px rgba(16, 24, 39, .32); }
.mini { position: relative; height: 214px; border-radius: 20px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 95% at 50% 0%, color-mix(in srgb, var(--acc) 26%, var(--card)) 0%, var(--paper) 72%); }
.pc-body { display: grid; gap: 10px; padding: 18px 12px 10px; align-content: start; }
.pc-top { display: flex; align-items: center; gap: 12px; }
.pc-top b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pc-breve { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.pc-body p { color: var(--muted); font-size: 15.5px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pc-foot .go { font-size: 14px; font-weight: 700; color: var(--acc-deep); }
.pcard:hover .go span { display: inline-block; transform: translateX(3px); transition: transform .2s; }

/* mini-scene (senza testo). Stato finale = statico; con .play (home.js, sezione in vista) le parti entrano in ciclo. */
.ms { position: relative; width: 78%; max-width: 300px; }
.ms .av { width: 26px; height: 26px; }
.ms .bub { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px 14px 14px 5px; background: var(--card); box-shadow: 0 8px 20px -12px rgba(16, 24, 39, .25); flex: 1; }
.ms .bub b { display: block; height: 7px; border-radius: 99px; background: var(--line); }
.ms .bub.acc { background: var(--acc); border-radius: 14px 14px 5px 14px; }
.ms .bub.acc b { background: color-mix(in srgb, #101827 22%, transparent); }
.ms .typing { padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: 0 8px 20px -12px rgba(16, 24, 39, .25); }
.ms-chat { display: grid; gap: 10px; }
.ms-chat .r { display: flex; gap: 8px; align-items: flex-end; }
.ms-chat .r.me { justify-content: flex-end; padding-left: 30%; }
.ms-chat .r1 .bub, .ms-chat .r3 .bub { max-width: 72%; }
.pcard.play .ms-chat .r { animation: msChat 8s var(--ease) infinite both; }
.pcard.play .ms-chat .r2 { animation-delay: .9s; } .pcard.play .ms-chat .r3 { animation-delay: 1.8s; } .pcard.play .ms-chat .r4 { animation-name: msChatT; animation-delay: 2.7s; }
@keyframes msChat { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 8%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes msChatT { 0% { opacity: 0; } 6%, 40% { opacity: 1; } 48%, 100% { opacity: 0; } }

.ms-gantt { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: var(--card); box-shadow: 0 10px 26px -16px rgba(16, 24, 39, .3); }
.ms-gantt .g { position: relative; height: 12px; border-radius: 99px; background: var(--line-2); }
.ms-gantt .g i { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 99px; background: color-mix(in srgb, var(--acc) 50%, var(--card)); transform-origin: left center; }
.ms-gantt .g i.acc { background: var(--acc); }
.ms-gantt .today { position: absolute; top: 8px; bottom: 8px; left: calc(16px + (100% - 32px) * var(--t) / 100%); width: 2px; border-radius: 2px; background: var(--acc-deep); }
.ms-gantt .today { left: calc(16px + (100% - 32px) * .57); }
.pcard.play .ms-gantt .g i { animation: msBar 7s var(--ease) infinite both; }
.pcard.play .ms-gantt .g:nth-child(2) i { animation-delay: .25s; } .pcard.play .ms-gantt .g:nth-child(3) i { animation-delay: .5s; } .pcard.play .ms-gantt .g:nth-child(4) i { animation-delay: .75s; }
.pcard.play .ms-gantt .today { animation: msToday 7s var(--ease) infinite both; }
@keyframes msBar { 0% { transform: scaleX(0); opacity: .4; } 14%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes msToday { 0% { opacity: 0; transform: translateX(-40px); } 20%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.ms-dolly { display: grid; gap: 12px; }
.ms-dolly .r { display: flex; gap: 8px; align-items: flex-end; }
.ms-dolly .q .bub { max-width: 70%; }
.ms-dolly .a { justify-content: flex-start; }
.ms-dolly .slot { position: relative; flex: 1; display: grid; }
.ms-dolly .slot > * { grid-area: 1 / 1; }
.ms-dolly .slot .typing { justify-self: start; opacity: 0; }
.ms-dolly .a .bub { border-radius: 14px 14px 14px 5px; max-width: 86%; background: color-mix(in srgb, var(--acc) 34%, var(--card)); }
.ms-dolly .a .bub b { background: color-mix(in srgb, var(--acc-deep) 35%, transparent); }
.ms-dolly .p { justify-content: flex-end; }
.ms-dolly .chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 99px; background: var(--card); box-shadow: 0 8px 20px -12px rgba(16, 24, 39, .25); }
.ms-dolly .chip b { width: 54px; height: 7px; border-radius: 99px; background: color-mix(in srgb, #1f8f4d 45%, transparent); }
.pcard.play .ms-dolly .q { animation: msChat 8s var(--ease) infinite both; }
.pcard.play .ms-dolly .a .sq { animation: msChat 8s var(--ease) .8s infinite both; }
.pcard.play .ms-dolly .slot .typing { animation: msChatT 8s var(--ease) .8s infinite both; }
.pcard.play .ms-dolly .a .bub { animation: msLate 8s var(--ease) .8s infinite both; }
.pcard.play .ms-dolly .p { animation: msLate2 8s var(--ease) .8s infinite both; }
@keyframes msLate { 0%, 22% { opacity: 0; transform: translateY(8px); } 30%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes msLate2 { 0%, 46% { opacity: 0; transform: translateY(8px) scale(.9); } 54%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

.ms-host { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--card); box-shadow: 0 10px 26px -16px rgba(16, 24, 39, .3); }
.ms-host .mh-top { display: flex; align-items: center; gap: 10px; }
.ms-host .mh-top b { flex: 1; max-width: 46%; height: 8px; border-radius: 99px; background: var(--line); }
.ms-host .mh-top .ok { margin-left: auto; width: 46px; height: 14px; border-radius: 99px; background: color-mix(in srgb, #1f8f4d 20%, var(--card)); }
.ms-host svg { width: 100%; height: 70px; }
.ms-host .bar { height: 7px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.ms-host .bar span { display: block; width: 21%; height: 100%; border-radius: inherit; background: var(--acc); transform-origin: left; }
.pcard.play .ms-host .ln { stroke-dasharray: 320; animation: msDraw 7s var(--ease) infinite both; }
.pcard.play .ms-host .area { animation: msFade 7s var(--ease) infinite both; }
.pcard.play .ms-host .bar span { animation: msBar 7s var(--ease) .6s infinite both; }
@keyframes msDraw { 0% { stroke-dashoffset: 320; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes msFade { 0%, 14% { opacity: 0; } 34%, 88% { opacity: 1; } 100% { opacity: 0; } }

.ms-en { width: 70%; }
.ms-en .pg { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--card); box-shadow: 0 10px 26px -16px rgba(16, 24, 39, .3); }
.ms-en .b { display: block; height: 14px; border-radius: 6px; background: var(--line-2); }
.ms-en .b.b-nav { height: 9px; width: 60%; }
.ms-en .b.b-hero { height: 46px; background: color-mix(in srgb, var(--acc) 42%, var(--card)); }
.ms-en .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-en .two .b { height: 30px; }
.ms-en .b.b-btn { width: 38%; height: 13px; background: var(--acc); }
.ms-en .cursor { position: absolute; width: 14px; height: 14px; right: 18%; bottom: 14%; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(-10deg); border-radius: 2px 0 0 0; }
.pcard.play .ms-en .b { animation: msDrop 8s var(--ease) infinite both; }
.pcard.play .ms-en .b.b-hero { animation-delay: .35s; } .pcard.play .ms-en .two .b:first-child { animation-delay: .7s; }
.pcard.play .ms-en .two .b:last-child { animation-delay: .9s; } .pcard.play .ms-en .b.b-btn { animation-delay: 1.25s; }
.pcard.play .ms-en .cursor { animation: msCursor 8s var(--ease) infinite both; }
@keyframes msDrop { 0% { opacity: 0; transform: translateY(-14px); } 7%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes msCursor { 0% { transform: translate(-90px, -70px) rotate(-10deg); opacity: 0; } 10% { opacity: 1; } 30%, 86% { transform: rotate(-10deg); opacity: 1; } 100% { opacity: 0; } }

.ms-ys { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; width: 84%; }
.ms-ys .scr { position: relative; display: grid; gap: 6px; padding: 12px 10px; border-radius: 12px; background: var(--card); box-shadow: 0 10px 26px -16px rgba(16, 24, 39, .3); border-bottom: 5px solid var(--line-2); }
.ms-ys .scr i { display: block; height: 7px; border-radius: 99px; background: var(--line); }
.ms-ys .scr i:nth-child(1) { width: 70%; } .ms-ys .scr i:nth-child(3) { width: 50%; }
.ms-ys .scr.r { box-shadow: 0 0 0 2px var(--acc), 0 10px 26px -16px rgba(16, 24, 39, .3); }
.ms-ys .link { position: relative; height: 2px; margin: 0 6px; background-image: linear-gradient(90deg, var(--muted) 50%, transparent 0); background-size: 8px 2px; opacity: .6; }
.ms-ys .pkt { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 30%, transparent); }
.ms-ys .cur { position: absolute; width: 10px; height: 10px; right: 26%; bottom: 30%; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(-10deg); }
.pcard.play .ms-ys .pkt { animation: msPkt 2.4s ease-in-out infinite; }
.pcard.play .ms-ys .cur { animation: msCur 4s ease-in-out infinite; }
@keyframes msPkt { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes msCur { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 30% { transform: translate(-22px, -10px) rotate(-10deg); } 60% { transform: translate(-6px, 8px) rotate(-10deg); } }


/* ---------- dentro le schede (sezione in vista, home.js mette .play): piccole scene in ciclo ---------- */
@keyframes fIn { 0% { opacity: 0; transform: translateY(8px) scale(.97); } 8%, 88% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes fGrow { 0% { transform: scaleX(0); } 18%, 90% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .3; } }
@keyframes fDraw { 0% { stroke-dashoffset: 320; } 35%, 100% { stroke-dashoffset: 0; } }
@keyframes fFade { 0%, 15% { opacity: 0; } 38%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fDigit { 0% { opacity: 0; transform: translateY(12px); filter: blur(4px); } 10%, 88% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; } }
@keyframes fSpeak { 0%, 22% { box-shadow: inset 0 0 0 2px var(--acc-deep), 0 0 0 4px color-mix(in srgb, var(--acc) 40%, transparent); } 26%, 100% { box-shadow: none; } }
@keyframes fCheck { 0%, 42% { background: transparent; border-color: var(--line); } 50%, 90% { background: var(--acc); border-color: var(--acc); } 100% { background: transparent; } }
@keyframes fTask { 0%, 42% { width: 66%; } 52%, 90% { width: 100%; } 100% { width: 66%; } }
@keyframes fPop { 0%, 60% { transform: none; } 66% { transform: scale(1.08); } 72%, 100% { transform: none; } }
.h-acc.play .frag[data-prodotto="net"] .f-msg, .h-acc.play .frag[data-prodotto="dolly"] .f-msg { animation: fIn 7s var(--ease) infinite both; }
.h-acc.play .frag .f-msg.me { animation-delay: .9s; }
.h-acc.play .frag .f-msg.bot { animation-delay: 1.4s; }
.h-acc.play .frag .f-typing { animation: fIn 7s var(--ease) 1.8s infinite both; }
.h-acc.play .f-spark .ln { stroke-dasharray: 320; animation: fDraw 6s var(--ease) infinite both; }
.h-acc.play .f-spark .area { animation: fFade 6s var(--ease) infinite both; }
.h-acc.play .f-bar span { transform-origin: left center; animation: fGrow 6s var(--ease) .5s infinite both; }
.h-acc.play .f-bar.tb span { transform: none; animation: fTask 6s var(--ease) infinite both; }
.h-acc.play .f-tasks li.todo::before { animation: fCheck 6s var(--ease) infinite both; }
.h-acc.play .f-gantt i::after { transform-origin: left center; animation: fGrow 6.5s var(--ease) infinite both; }
.h-acc.play .f-gantt div:nth-child(2) i::after { animation-delay: .3s; } .h-acc.play .f-gantt div:nth-child(3) i::after { animation-delay: .6s; }
.h-acc.play .f-code span { display: inline-block; animation: fDigit 6s var(--ease) infinite both; }
.h-acc.play .f-code span:nth-child(2) { animation-delay: .15s; } .h-acc.play .f-code span:nth-child(3) { animation-delay: .3s; }
.h-acc.play .f-page .blk { animation: fIn 7s var(--ease) infinite both; }
.h-acc.play .f-page .b-hero { animation-delay: .2s; } .h-acc.play .f-page .two .blk:first-child { animation-delay: .5s; }
.h-acc.play .f-page .two .blk:last-child { animation-delay: .65s; } .h-acc.play .f-page .b-btn { animation-delay: .9s; }
.h-acc.play .f-btn { animation: fPop 7s var(--ease) infinite; }
.h-acc.play .f-call div { animation: fSpeak 4.8s linear infinite; box-shadow: none; }
.h-acc.play .f-call div:nth-child(2) { animation-delay: 1.2s; } .h-acc.play .f-call div:nth-child(3) { animation-delay: 2.4s; } .h-acc.play .f-call div:nth-child(4) { animation-delay: 3.6s; }

/* card dei prodotti: entrata a scalare (solo con lo script; senza, sono già visibili) */
.showcase.js-anim .pcard { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .8s var(--ease), transform .9s var(--ease), box-shadow .3s var(--ease); transition-delay: calc(var(--n, 0) * 110ms); }
.showcase.js-anim .pcard.seen { opacity: 1; transform: none; }
.showcase.js-anim .pcard.seen:hover { transform: translateY(-4px); transition-delay: 0s; }

/* ---------- chiusura ---------- */
.h-end { padding: 40px 0 96px; }
.end-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 44px 48px; border-radius: 32px;
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--artiko) 30%, var(--card)), var(--card) 60%); border: 1px solid var(--line-2); box-shadow: var(--soft-shadow); }
.end-card h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em; max-width: 22ch; color: var(--ink); }
.end-card .kicker { color: var(--artiko-deep); }
:root[data-theme="dark"] .end-card .kicker { color: var(--artiko); }
@media (max-width: 640px) { .end-card { padding: 30px 24px; border-radius: 26px; } }

/* ---------- meno movimento: tutto fermo e visibile ---------- */
@media (prefers-reduced-motion: reduce) {
  .cst .node .in, .h-copy > *, .cst .node.hub .in::before, .live, .dots i, .typing i, .cst-lines .el { animation: none !important; }
  .cst-lines .el { opacity: 1; }
  .pcard.play .ms *, .pcard.play .ms { animation: none !important; }
  .ms-dolly .slot .typing { opacity: 0; }
  .frag, .side { transform: none !important; opacity: 1 !important; }
  .h-acc.play .frag *, .h-acc.play .frag *::before, .h-acc.play .frag *::after { animation: none !important; }
  .showcase.js-anim .pcard { opacity: 1; transform: none; }
}