body{background-image:url();background-repeat:repeat}.text-center{text-align:center}.btn{display:inline-block;padding:.5rem 1.25rem;font-size:.9rem;font-weight:500;text-decoration:none;border-radius:8px;cursor:pointer;border:none;transition:opacity .2s}.btn:hover{opacity:.9}.btn-primary{background:#22d3c5;color:#0a0a0c}.btn-secondary{background:#ffffff1a;color:var(--stroke, #22d3c5);border:1px solid var(--stroke, #22d3c5)}.demo-phone-wrap{min-height:520px}.demo-mode-toggle{display:flex;justify-content:center;gap:0;margin-top:100px;margin-bottom:1rem}.mode-toggle-btn{padding:.5rem 1.5rem;font-size:.9rem;font-weight:500;color:var(--stroke, #22d3c5);background:#ffffff0f;border:1px solid var(--stroke, #22d3c5);cursor:pointer;transition:all .2s}.mode-toggle-btn:first-child{border-radius:8px 0 0 8px;border-right:none}.mode-toggle-btn:last-child{border-radius:0 8px 8px 0;border-left:1px solid var(--stroke, #22d3c5)}.mode-toggle-btn.is-active{background:var(--stroke, #22d3c5);color:#0a0a0c;border-color:var(--stroke, #22d3c5)}.demo-buttons-wrap{min-height:80px}.demo-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:80px;margin-bottom:60px;padding:0 1rem}.phone-graphic{position:relative;width:330px;margin:20px auto 30px}.phone-case{box-shadow:inset 3px 3px 8px #555,inset 0 0 3px #1a1a1e,inset -3px -3px 8px #111,10px 10px 20px #0006;border-radius:50px;background:linear-gradient(145deg,#3a3a3e,#2a2a2e,#1a1a1e);width:330px;padding:10px}.phone-case:before{content:"";position:absolute;background:linear-gradient(180deg,#2a2a2e,#1a1a1e);width:5px;height:30px;left:-5px;top:130px;border-top-left-radius:5px;border-bottom-left-radius:5px;box-shadow:inset 2px 0 2px #444}.phone-case:after{content:"";position:absolute;background:linear-gradient(180deg,#2a2a2e,#1a1a1e);width:5px;height:70px;left:330px;top:135px;border-top-right-radius:5px;border-bottom-right-radius:5px;box-shadow:inset 1px 0 4px #111,inset -2px 2px 4px #444,10px 10px 20px #0006}.phone-container-outer{position:relative;font-family:helvetica;font-size:.8rem;border:1px solid #333;border-radius:40px;box-shadow:inset 1px 1px 4px #444,inset -1px -1px 4px #111,0 0 8px #0000004d;background-color:#0a0a0c;height:600px}.phone-container-inner{position:relative;z-index:6;background:#fff;margin:13px;border-radius:30px;overflow:hidden;height:574px}.phone-container-outer:after{content:"";position:absolute;top:0;left:0;width:300px;height:600px;background:linear-gradient(130deg,#ffffff59,#fff3 25%,#fff0 25%);z-index:5;border-radius:40px}.phone-container-inner:before{content:"";position:absolute;top:0;background-color:#000;width:110px;height:17px;left:calc(50% - 55px);border-radius:0 0 20px 20px;z-index:2}.phone-header{position:absolute;width:100%;height:95px;top:0;background-color:#f4f4f4}.phone-header-time{position:absolute;font-size:.8rem;top:5px;left:15px;color:#1a1a1e;font-weight:600}.phone-header-icons{position:absolute;top:5px;right:15px;color:#1a1a1e}.phone-header-icons .material-icons{font-size:.9rem;color:#1a1a1e}.phone-header-icons .material-icons.battery{transform:rotate(90deg)}.contact-image{position:absolute;width:34px;height:34px;top:30px;left:calc(50% - 17px);background-color:#b4b4ba;box-shadow:0 0 0 3px #b4b4ba;border-radius:100%;overflow:hidden}.contact-image .material-icons{font-size:2.8rem;color:#fff;margin-left:-5px}.contact-phone{position:absolute;font-size:.7rem;top:73px;left:50%;transform:translate(-50%);color:#1a1a1e;font-weight:500}.contact-phone a{color:#1a1a1e}.phone-content{position:relative;height:479px}.phone-content-call{position:relative;height:574px;overflow:hidden}.phone-call-voice-test{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;background:var(--base-100, #0a0a0c);padding:.5rem;box-sizing:border-box}.phone-call-voice-test::-webkit-scrollbar{display:none}.phone-call-voice-test .voice-test-wrap{max-width:none;min-height:100%}.phone-call-voice-test .voice-test-transcript{scrollbar-width:none;-ms-overflow-style:none}.phone-call-voice-test .voice-test-transcript::-webkit-scrollbar{display:none}.phone-call-voice-test .voice-test-card,.phone-call-voice-test .voice-test-transcript,.phone-call-voice-test .voice-test-error{scrollbar-width:none}.phone-messages{margin-top:100px;padding:20px 20px 50px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.phone-messages::-webkit-scrollbar{display:none}.message{padding:5px 10px;margin-bottom:10px;border-radius:10px}.message p{position:relative;z-index:6;margin:0;white-space:pre-line}.message-contact{position:relative;background-color:#e8e8ec;color:#1a1a1e;text-align:left;margin-right:20%}.message-contact p{color:#1a1a1e}.message-you{position:relative;background-color:#3bbe41;color:#fff;text-align:right;margin-left:20%}.message-contact:before{content:"";position:absolute;bottom:0;left:-10px;height:20px;width:20px;background:#e8e8ec;border-bottom-right-radius:15px}.message-contact:after{content:"";position:absolute;z-index:1;bottom:0;left:-15px;width:15px;height:20px;background:#fff;border-bottom-right-radius:20px}.message-you:before{content:"";position:absolute;bottom:0;right:-10px;height:20px;width:20px;background:#3bbe41;border-bottom-left-radius:15px}.message-you:after{content:"";position:absolute;z-index:1;bottom:0;right:-15px;width:15px;height:20px;background:#fff;border-bottom-left-radius:20px}.phone-footer{position:absolute;height:40px;bottom:0;width:100%;background-color:#efefef}.phone-footer-icons{position:absolute;bottom:3px;left:15px;color:#7b838d}.phone-footer-input{position:absolute;bottom:7px;left:50px;width:200px;border:1px solid #cfcfd2;padding:3px 10px;border-radius:30px}.phone-footer-input p{margin:0;color:#cfcfd2}@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translate(1000px);opacity:0}to{-webkit-transform:translateX(0);transform:translate(0);opacity:1}}@keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translate(1000px);opacity:0}to{-webkit-transform:translateX(0);transform:translate(0);opacity:1}}@-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translate(-1000px);opacity:0}to{-webkit-transform:translateX(0);transform:translate(0);opacity:1}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translate(-1000px);opacity:0}to{-webkit-transform:translateX(0);transform:translate(0);opacity:1}}
