.phone-demo{position:relative;width:min(100%,500px);margin:0 auto;isolation:isolate}.phone-glow{position:absolute;inset:15% 10%;z-index:-1;background:radial-gradient(circle at center,rgba(99,102,241,.14),transparent 65%);filter:blur(35px);animation:phone-glow 4s ease-in-out infinite}.phone-card{position:relative;overflow:hidden;border:1px solid rgba(20,18,16,.08);border-radius:28px;background:linear-gradient(145deg,#fffffff0,#ffffffc7);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 30px 80px #14121038,inset 0 1px #ffffffe6;color:#201c18}.phone-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;flex:0 0 auto}.business{display:flex;align-items:center;gap:12px}.business-avatar{display:block;width:42px;height:42px;border-radius:50%;background:#fff;object-fit:cover;border:1px solid rgba(20,18,16,.08)}.business-name{font-size:14px;font-weight:600}.call-status{display:flex;align-items:center;gap:6px;margin-top:3px;color:#1412108c;font-size:11px}.status-dot{width:6px;height:6px;border-radius:50%;background:#5ee58a;box-shadow:0 0 0 4px #5ee58a14;animation:phone-status-pulse 2s infinite}.call-time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#1412108c;font-size:12px}.conversation{padding:20px 24px 12px}.phone-messages{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0 0}.message-row{display:flex;align-items:flex-start;flex:0 0 auto;width:100%}.message-row.phone-message-entering{animation:phone-message-enter .55s cubic-bezier(.22,1,.36,1)}.message-row.phone-caller{justify-content:flex-start}.message-row.phone-agent{justify-content:flex-end}.message-avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;color:#fff;margin-top:2px}.message-row.phone-caller .message-avatar{margin-right:9px;background:linear-gradient(150deg,#8a8580,#5c5751)}.message-row.phone-agent .message-avatar{margin-left:9px;background:linear-gradient(150deg,#4e8cff,#2f5cff)}.message-content{max-width:78%;text-align:left}.message-row.phone-agent .message-content{text-align:right}.message-row.phone-agent .message-bubble{text-align:left}.speaker{margin-bottom:7px;color:#14121080;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none}.message-bubble{display:inline-block;padding:10px 13px;border:1px solid rgba(20,18,16,.08);border-radius:15px;background:#1412100b;color:#141210e0;font-size:13px;line-height:1.5;text-align:left}.typing-cursor[hidden]{display:none}.typing-cursor{display:inline-block;width:1px;height:13px;margin-left:2px;vertical-align:-2px;background:currentColor;animation:phone-cursor-blink .8s infinite}.speaking{display:flex;align-items:center;gap:9px;height:34px;margin-top:18px;color:#14121066;font-size:10px;opacity:.5;transition:opacity .3s ease}.speaking.active{opacity:1}.speaking-bars{display:flex;align-items:center;gap:2px;height:14px}.speaking-bars span{display:block;width:2px;height:5px;border-radius:999px;background:#1412108c;animation:phone-voice-wave .9s ease-in-out infinite}.speaking-bars span:nth-child(2){animation-delay:.1s}.speaking-bars span:nth-child(3){animation-delay:.2s}.speaking-bars span:nth-child(4){animation-delay:.3s}.speaking-bars span:nth-child(5){animation-delay:.4s}.phone-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-top:1px solid rgba(20,18,16,.08);color:#14121073;font-size:10px;flex:0 0 auto}.transcript,.voice{display:flex;align-items:center;gap:7px}.live-dot{width:5px;height:5px;border-radius:50%;background:#5ee58a}.phone-incoming{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:48px 24px 44px;background:linear-gradient(150deg,#fff,#fbfaf8);transition:opacity .32s ease}.phone-incoming[hidden]{display:none}.phone-incoming--leaving{opacity:0;pointer-events:none}.incoming-top{display:flex;flex-direction:column;align-items:center;text-align:center}.incoming-avatar-wrap{position:relative;margin-bottom:10px}.incoming-business-avatar{display:block;width:64px;height:64px;border-radius:50%;background:#fff;object-fit:cover;border:1px solid rgba(20,18,16,.08);animation:phone-incoming-shake 1.2s ease-in-out 1}.incoming-avatar-wrap .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(29,161,99,.4);opacity:0;animation:phone-incoming-ring .6s ease-out 1;pointer-events:none}.incoming-avatar-wrap .ring:nth-child(1){animation-delay:0s}.incoming-avatar-wrap .ring:nth-child(2){animation-delay:.3s}.incoming-avatar-wrap .ring:nth-child(3){animation-delay:.6s}.incoming-business-name{font-size:15px;font-weight:700;color:#201c18}.incoming-call-badge{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:4px 10px;border-radius:999px;background:#35d07f1f;color:#1da163;font-size:11px;font-weight:600}.incoming-number{margin-top:7px;font-size:12px;color:#14121080;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}.incoming-bottom{display:flex;flex-direction:column;align-items:center;text-align:center}.incoming-agent-wrap{position:relative;margin-bottom:10px}.incoming-agent-avatar{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(150deg,#4e8cff,#2f5cff);color:#fff;box-shadow:0 14px 34px #2f5cff47;animation:phone-incoming-shake 1.2s ease-in-out 1.4s 1}.incoming-agent-wrap .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(47,92,255,.4);opacity:0;animation:phone-incoming-ring .6s ease-out 1;pointer-events:none}.incoming-agent-wrap .ring:nth-child(1){animation-delay:1.4s}.incoming-agent-wrap .ring:nth-child(2){animation-delay:1.7s}.incoming-agent-wrap .ring:nth-child(3){animation-delay:2s}.incoming-agent-name{font-size:14px;font-weight:700;color:#201c18}.incoming-hint{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:12px;color:#14121073}.incoming-dots{display:inline-flex;gap:3px}.incoming-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:phone-incoming-dot 1.2s ease-in-out infinite}.incoming-dots i:nth-child(2){animation-delay:.2s}.incoming-dots i:nth-child(3){animation-delay:.4s}.booked-card{position:absolute;top:-28px;right:-34px;z-index:20;display:flex;align-items:center;gap:10px;width:max-content;max-width:320px;padding:10px 14px;border-radius:14px;background:#fffffff7;border:1px solid rgba(29,161,99,.28);box-shadow:0 14px 40px #14121033;opacity:0;transform:translateY(10px) scale(.94);transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);pointer-events:none}.booked-card[hidden]{display:none}.booked-card.phone-booked--show{opacity:1;transform:translateY(0) scale(1)}.booked-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:linear-gradient(150deg,#35d07f,#1da163);color:#fff}.booked-title{font-size:12.5px;font-weight:700;color:#201c18;line-height:1.3}.booked-detail{margin-top:2px;font-size:11px;color:#1412108c;line-height:1.35}.sms-notification{position:absolute;left:-34px;bottom:-30px;z-index:20;display:flex;gap:10px;width:max-content;max-width:300px;padding:11px 14px;border-radius:16px;background:#fffffff7;border:1px solid rgba(20,18,16,.08);box-shadow:0 18px 48px #14121038;opacity:0;transform:translateY(16px) scale(.96);transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);pointer-events:none}.sms-notification[hidden]{display:none}.sms-notification.phone-sms--show{opacity:1;transform:translateY(0) scale(1)}.sms-app-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:linear-gradient(150deg,#5ac8fa,#0a84ff);color:#fff}.sms-app-name{font-size:9.5px;font-weight:600;color:#14121073;text-transform:uppercase;letter-spacing:.04em}.sms-header{display:flex;align-items:baseline;gap:6px}.sms-time{font-size:9.5px;color:#14121066}.sms-title{margin-top:1px;font-size:12px;font-weight:700;color:#201c18;line-height:1.3}.sms-body{margin-top:2px;font-size:11px;color:#14121099;line-height:1.4}.hangup-layer{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(150deg,#ffffffe6,#fffaf8d9);opacity:0;transition:opacity .4s ease;pointer-events:none}.hangup-layer[hidden]{display:none}.hangup-layer.phone-hangup--show{opacity:1}.hangup-icon{position:relative;width:72px;height:72px;border-radius:50%;background:linear-gradient(150deg,#ff6b52,#e2402a);display:grid;place-items:center;color:#fff;box-shadow:0 16px 40px #e2402a4d;animation:phone-hangup-press 1.6s ease-in-out 1}.hangup-icon svg{animation:phone-hangup-rotate .7s cubic-bezier(.22,1,.36,1) 1}.hangup-icon .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(226,64,42,.4);opacity:0;animation:phone-incoming-ring .6s ease-out 1;pointer-events:none}.hangup-icon .ring:nth-child(2){animation-delay:.25s}.hangup-icon .ring:nth-child(3){animation-delay:.5s}.hangup-label{font-size:14px;font-weight:700;color:#d93a24;letter-spacing:.01em}@keyframes phone-message-enter{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes phone-cursor-blink{0%,45%{opacity:1}46%,to{opacity:0}}@keyframes phone-voice-wave{0%,to{height:4px}50%{height:13px}}@keyframes phone-status-pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes phone-glow{0%,to{opacity:.65;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}@keyframes phone-incoming-shake{0%,to{transform:rotate(0)}8%,24%,40%,56%,72%{transform:rotate(-9deg)}16%,32%,48%,64%,80%{transform:rotate(9deg)}}@keyframes phone-incoming-ring{0%{transform:scale(1);opacity:.5}to{transform:scale(1.85);opacity:0}}@keyframes phone-incoming-dot{0%,60%,to{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}@media(max-width:640px){.phone-header{padding:18px}.conversation{min-height:300px;padding:18px 18px 10px}.phone-footer{padding:14px 18px}.message-content{max-width:88%}}@media(prefers-reduced-motion:reduce){.phone-glow,.status-dot,.typing-cursor,.speaking-bars span,.message-row,.incoming-business-avatar,.incoming-agent-avatar,.incoming-avatar-wrap .ring,.incoming-agent-wrap .ring,.incoming-dots i,.hangup-icon,.hangup-icon svg,.hangup-icon .ring{animation:none}.phone-incoming,.booked-card,.sms-notification,.hangup-layer{transition:none}}@keyframes phone-hangup-press{0%,to{transform:translateY(0)}30%{transform:translateY(6px) scale(.96)}55%{transform:translateY(0)}}@keyframes phone-hangup-rotate{0%{transform:rotate(0)}to{transform:rotate(135deg)}}