:root{
  --bg:#0a111f; --bg-2:#0e1728; --panel:#131d31; --panel-2:#192540; --line:#223049;
  --ink:#eef2f8; --ink-2:#b4bfd3; --ink-3:#7c89a3;
  --accent:#5fe3b1; --accent-ink:#0a111f; --amber:#f2b84b;
  --wa-bg:#0b141a; --wa-in:#202c33; --wa-out:#005c4b; --wa-ink:#e9edef; --wa-time:#8696a0;
  --erp-bg:#ffffff; --erp-ink:#172033; --erp-line:#e6e9f0; --erp-head:#f5f7fa; --erp-mute:#6b7588;
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Albert Sans",system-ui,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; position:relative}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body > *{position:relative; z-index:1}
a{color:inherit}
h1,h2,h3{font-family:"Sora",system-ui,sans-serif; letter-spacing:-.015em; margin:0}
h2{font-size:clamp(24px,3vw,32px); font-weight:600; line-height:1.15}
h3{font-size:18px; font-weight:600}
p{margin:0}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.eyebrow{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}

/* nav */
.nav{position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-family:"Sora",sans-serif; font-weight:600; display:flex; align-items:center; gap:10px}
.brand-dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; border-radius:12px; text-decoration:none; font-weight:600; font-size:15px; border:1px solid var(--line); color:var(--ink); background:var(--panel); transition:transform .15s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent; box-shadow:0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent)}
.btn.primary:hover{box-shadow:0 14px 34px -12px color-mix(in srgb, var(--accent) 85%, transparent)}
.btn.ghost{background:transparent}
.btn.small{padding:9px 14px; font-size:14px}
.btn.wide{width:100%}
.btn[hidden]{display:none}

/* hero */
.hero{padding:56px 0 56px; background:
  radial-gradient(1000px 500px at 50% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 65%),
  linear-gradient(transparent 0, transparent 100%)}
.hero-copy{text-align:center; max-width:940px; animation:rise .7s ease both}
h1{font-size:clamp(30px,3.9vw,46px); font-weight:700; line-height:1.08}
.lede{margin:16px auto 24px; font-size:clamp(16px,1.6vw,18px); color:var(--ink-2); max-width:60ch}
.hero-cta{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap}
.note{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.06em; color:var(--ink-3); border:1px solid var(--line); padding:6px 10px; border-radius:999px}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* stage */
.stage{margin-top:36px; background:linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%); border:1px solid var(--line); border-radius:24px; padding:18px; box-shadow:0 40px 100px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04); animation:rise .8s .15s ease both}
.controls{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:4px 6px 16px; flex-wrap:wrap}
.tabs{display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:4px; gap:2px}
.tab{appearance:none; border:0; background:transparent; color:var(--ink-2); font:inherit; font-weight:600; font-size:14px; padding:8px 14px; border-radius:9px; cursor:pointer; transition:background .2s, color .2s}
.tab:hover{color:var(--ink)}
.tab.is-on{background:var(--panel-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}
.stepsbar{list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap}
.stepsbar li{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); padding:6px 12px 6px 6px; border-radius:999px; border:1px solid transparent; transition:all .3s}
.stepsbar li span{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-family:"JetBrains Mono",monospace; font-size:11px; background:var(--bg); border:1px solid var(--line); color:var(--ink-3); transition:all .3s}
.stepsbar li.on{color:var(--ink); border-color:var(--line); background:var(--bg)}
.stepsbar li.on span{background:var(--accent); color:var(--accent-ink); border-color:transparent; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent)}
.stepsbar li.done{color:var(--ink-2)}
.stepsbar li.done span{background:transparent; border-color:var(--accent); color:var(--accent)}
.stepsbar li.done span::before{content:"✓"}
.stepsbar li.done span{font-size:0}
.stepsbar li.done span::before{font-size:11px}
.stepsbar li.skip{text-decoration:line-through; opacity:.55}
.replay{appearance:none; border:1px solid var(--line); background:var(--bg); color:var(--ink-2); font:inherit; font-size:13px; font-weight:600; padding:8px 12px; border-radius:10px; cursor:pointer}
.replay:hover{color:var(--ink)}

.scene{display:grid; grid-template-columns:340px 56px 1fr; align-items:stretch; gap:0}

/* phone */
.phone{background:var(--wa-bg); border-radius:30px; padding:10px; border:1px solid #273844; box-shadow:0 30px 70px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.04); display:flex; flex-direction:column; height:520px}
.phone-top{display:flex; align-items:center; gap:10px; padding:10px 12px 12px; color:var(--wa-ink); border-bottom:1px solid #1e2b33}
.phone-top b{display:block; font-size:15px; font-weight:600}
.phone-top small{font-size:12px; color:var(--wa-time)}
.avatar{width:34px; height:34px; border-radius:50%; background:#2a3942; display:grid; place-items:center; font-weight:700; color:#cfd8dc; font-family:"Sora",sans-serif}
.chat{flex:1; overflow:auto; scrollbar-width:none; padding:12px 8px 10px; display:flex; flex-direction:column; gap:7px; background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size:12px 12px; border-radius:0 0 20px 20px}
.chat::-webkit-scrollbar{display:none}
.msg{max-width:88%; padding:7px 9px 5px; border-radius:9px; font-size:13.5px; line-height:1.38; color:var(--wa-ink); position:relative; animation:pop .35s cubic-bezier(.2,.9,.3,1.2) both; transform-origin:bottom left}
.msg.out{transform-origin:bottom right}
.msg.in{background:var(--wa-in); align-self:flex-start; border-top-left-radius:2px}
.msg.out{background:var(--wa-out); align-self:flex-end; border-top-right-radius:2px}
.msg .time{display:block; text-align:right; font-size:10.5px; color:var(--wa-time); margin-top:3px}
.msg .time.tick::after{content:" ✓✓"; color:#53bdeb}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:none}}
.typing{align-self:flex-end; background:var(--wa-out); border-radius:9px; padding:9px 12px; display:flex; gap:4px; animation:pop .25s both}
.typing i{width:6px; height:6px; border-radius:50%; background:#cfe9e1; opacity:.5; animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.voice{display:flex; align-items:center; gap:8px; min-width:220px; padding:2px 0}
.play{width:30px; height:30px; border-radius:50%; background:#8696a0; position:relative; flex:none}
.play::after{content:""; position:absolute; left:11px; top:8px; border-left:11px solid #0b141a; border-top:7px solid transparent; border-bottom:7px solid transparent}
.bars{flex:1; height:22px; position:relative; background:repeating-linear-gradient(90deg, #8696a0 0 2px, transparent 2px 5px);
  clip-path:polygon(0 40%,4% 20%,8% 55%,12% 15%,16% 60%,20% 30%,24% 70%,28% 25%,32% 50%,36% 10%,40% 65%,44% 35%,48% 75%,52% 20%,56% 55%,60% 30%,64% 70%,68% 40%,72% 60%,76% 15%,80% 50%,84% 25%,88% 65%,92% 35%,96% 55%,100% 45%,100% 55%,96% 45%,92% 65%,88% 35%,84% 75%,80% 50%,76% 85%,72% 40%,68% 60%,64% 30%,60% 70%,56% 45%,52% 80%,48% 25%,44% 65%,40% 35%,36% 90%,32% 50%,28% 75%,24% 30%,20% 70%,16% 40%,12% 85%,8% 45%,4% 80%,0 60%)}
.bars::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, #5fe3b1 0 2px, transparent 2px 5px); clip-path:inset(0 100% 0 0); animation:listen 1.6s .3s linear forwards}
@keyframes listen{to{clip-path:inset(0 0 0 0)}}
.dur{font-size:11px; color:var(--wa-time); font-family:"JetBrains Mono",monospace}
.photo{width:230px; height:130px; border-radius:7px; margin-bottom:6px; background:
  linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.5)),
  repeating-linear-gradient(90deg, #6f8f6a 0 22px, #2f4f3a 22px 26px, #c9a65a 26px 46px, #2b2b2b 46px 50px, #3d6cb4 50px 70px, #1d2a3a 70px 74px),
  #1a2430; position:relative; overflow:hidden}
.photo::after{content:""; position:absolute; left:0; right:0; top:46%; height:3px; background:#5a4630; box-shadow:0 62px 0 #5a4630}

/* link */
.link{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative}
.link::before{content:""; position:absolute; top:50%; left:8px; right:8px; height:1px; background:var(--line)}
.link i{width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:0; position:absolute; top:50%; left:8px; margin-top:-3px}
.stage.matching .link i{animation:travel 1s linear infinite}
.stage.matching .link i:nth-child(2){animation-delay:.33s}
.stage.matching .link i:nth-child(3){animation-delay:.66s}
.stage.asking .link i{animation:travel 1s linear infinite reverse}
.stage.asking .link i:nth-child(2){animation-delay:.33s}
.stage.asking .link i:nth-child(3){animation-delay:.66s}
@keyframes travel{0%{transform:translateX(0); opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(34px); opacity:0}}

/* erp */
.erp{background:var(--erp-bg); color:var(--erp-ink); border-radius:16px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,.8); border:1px solid #d9deea; display:flex; flex-direction:column; min-width:0}
.erp-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--erp-head); border-bottom:1px solid var(--erp-line)}
.erp-bar .dot{width:9px; height:9px; border-radius:50%; background:#d5dae6}
.erp-title{margin-left:8px; font-family:"JetBrains Mono",monospace; font-size:11.5px; color:#4f5a6d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.erp-right{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--erp-mute); white-space:nowrap}
.heard{padding:12px 14px; border-bottom:1px solid var(--erp-line); background:#fbfcfd; animation:fade .4s both}
.heard small{display:block; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--erp-mute); margin-bottom:4px}
.heard p{font-size:14px; line-height:1.45; color:#2a3447; min-height:1.4em}
.heard p::after{content:"▍"; color:var(--accent); animation:blink .8s infinite}
.heard.typed p::after{content:""}
.empty{padding:40px 14px; text-align:center; color:var(--erp-mute); font-size:13.5px; font-family:"JetBrains Mono",monospace}
.empty[hidden]{display:none}
.erp table{width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed}
.erp th{text-align:left; font-weight:600; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--erp-mute); padding:9px 12px; background:var(--erp-head); border-bottom:1px solid var(--erp-line)}
.erp th:nth-child(1){width:84px}.erp th:nth-child(3){width:64px}.erp th:nth-child(4){width:96px}.erp th:nth-child(5){width:34%}
.erp td{padding:9px 12px; border-bottom:1px solid var(--erp-line); vertical-align:top; overflow:hidden; text-overflow:ellipsis}
.erp tbody tr{animation:rowin .45s cubic-bezier(.2,.8,.2,1) both}
.erp tbody tr.flash{animation:rowin .45s both, flash 1.2s .1s both}
@keyframes rowin{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}
@keyframes flash{0%{background:#e3f7ee}100%{background:transparent}}
.erp .mono{font-family:"JetBrains Mono",monospace; font-size:12px; color:#3b465b}
.erp .r{text-align:right; white-space:nowrap; font-weight:600}
.erp td.n{color:var(--erp-mute); font-size:12.2px}
.st{font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.04em; padding:3px 8px; border-radius:999px; white-space:nowrap; display:inline-block; transition:background .3s, color .3s}
.st.ok{background:#e3f7ee; color:#0f7a56}
.st.ask{background:#fdf1d8; color:#9a6a12}
.st.op{background:#eceff5; color:#4e5a70}
.st.swap{animation:swap .5s ease}
@keyframes swap{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.erp-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--erp-line); background:var(--erp-head); min-height:48px}
.sum{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--erp-mute)}
.sum b{color:#0f7a56; font-weight:600}
.file{display:inline-flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:11.5px; color:#2a3447; background:#fff; border:1px solid var(--erp-line); border-radius:8px; padding:5px 8px 5px 5px; animation:pop .4s both}
.file b{background:var(--accent); color:var(--accent-ink); font-size:10px; padding:4px 6px; border-radius:5px}
.file[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* facts */
.facts-band{padding:56px 0; border-top:1px solid var(--line)}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.facts b{display:block; font-family:"Sora",sans-serif; font-weight:600; font-size:17px; margin-bottom:8px; padding-top:14px; border-top:2px solid var(--accent); max-width:26ch}
.facts p{color:var(--ink-2); font-size:15px}

/* start */
.start{padding:72px 0; border-top:1px solid var(--line); background:var(--bg-2)}
.start-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start}
.start-steps{margin:22px 0 0; padding-left:22px; color:var(--ink-2); display:flex; flex-direction:column; gap:12px; font-size:16px}
.start-steps b{color:var(--ink); font-weight:600}
.start-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; gap:12px}
.start-card h3{font-size:22px}
.start-card p{color:var(--ink-2); font-size:15px}
.start-card small{color:var(--ink-3); font-size:12.5px; margin-top:4px}

footer{padding:28px 0 48px; color:var(--ink-3); font-size:12.5px; line-height:1.6}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* responsive */
@media (max-width:980px){
  .scene{grid-template-columns:1fr; gap:14px}
  .link{display:none}
  .phone{height:380px; width:100%; max-width:420px; margin:0 auto}
  .erp{min-height:360px}
  .controls{gap:10px}
  .replay{order:3}
}
@media (max-width:900px){
  .start-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr; gap:20px}
  .hero{padding:48px 0 40px}
  .stage{margin-top:36px; padding:12px; border-radius:18px}
}
@media (max-width:600px){
  .erp th:nth-child(5),.erp td:nth-child(5){display:none}
  .erp th:nth-child(1){width:70px}
  .erp td{padding:8px 10px}
  .stepsbar li{padding:5px 9px 5px 5px; font-size:12px}
  .tab{padding:7px 11px; font-size:13px}
  .phone{height:340px}
}
@media (max-width:420px){
  .erp th:nth-child(1),.erp td:nth-child(1){display:none}
  .stepsbar li{gap:6px}
}

/* mobile controls */
@media (max-width:600px){
  .controls{display:grid; grid-template-columns:1fr auto; gap:10px; padding-bottom:12px}
  .tabs{justify-self:start}
  .replay{order:0; font-size:12px; padding:7px 10px}
  .stepsbar{grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
  .stepsbar li{justify-content:center; padding:5px 4px; font-size:11px; gap:5px; border-color:var(--line); background:var(--bg)}
  .erp-right{display:none}
  .erp-title{margin-left:6px; white-space:normal}
  .erp-foot{flex-direction:column; align-items:flex-start; gap:8px}
  .file span{word-break:break-all}
  .erp table{font-size:12.5px}
}

/* codici a listino con prefisso: mai a capo */
.erp td.mono{white-space:nowrap}
.erp th:nth-child(1){width:100px}
@media (max-width:600px){.erp th:nth-child(1){width:92px}}