.demo-select{background:radial-gradient(circle at 12% 12%,#455bff21,#0000 28%),radial-gradient(circle at 88% 14%,#7657ff1f,#0000 28%),linear-gradient(160deg,#f9fbff,#eef3fa);min-height:calc(100vh - 120px);padding:3rem 0 5rem}.demo-wrap{width:min(1180px,100% - 40px);margin:auto}.demo-back{color:#718098;font-size:.78rem;font-weight:900;text-decoration:none}.demo-head{max-width:900px;margin-top:2.2rem}.demo-head>span{color:#6477df;letter-spacing:.09em;align-items:center;gap:.4rem;font-size:.75rem;font-weight:950;display:inline-flex}.demo-head>span i{background:#4eddb2;border-radius:50%;width:8px;height:8px}.demo-head h1{letter-spacing:-.065em;margin:.65rem 0 .6rem;font-size:clamp(3.4rem,6.6vw,6.7rem);line-height:.9}.demo-head h1 em{background:linear-gradient(90deg,#5268ff,#7f62ff,#42bfe7);color:#0000;-webkit-background-clip:text;font-style:normal}.demo-head>p{color:#718096;max-width:780px;margin:0;font-size:1rem;line-height:1.7}.demo-grid{grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2rem;display:grid}.demo-card{color:#0a1729;background:linear-gradient(#fff,#fbfcff);border:1px solid #11274817;border-radius:26px;flex-direction:column;min-height:530px;padding:1.35rem;text-decoration:none;transition:all .2s;display:flex;position:relative;overflow:hidden;box-shadow:0 24px 75px #1223401a,inset 0 1px #ffffffe6}.demo-card:hover{border-color:#5368ff2e;transform:translateY(-4px);box-shadow:0 32px 90px #12234026}.demo-card:before{content:"";opacity:.88;background:linear-gradient(90deg,#315cff,#7657ff,#42caee);height:3px;position:absolute;inset:0 0 auto}.demo-card.customer:before{background:linear-gradient(90deg,#42caee,#5368ff,#8b68ff)}.demo-card.customer{color:#ecf2ff;background:radial-gradient(circle at 88% 5%,#6f54ff6b,#0000 31%),radial-gradient(circle at 8% 100%,#42caee1a,#0000 30%),linear-gradient(145deg,#0b1b31,#071321);border-color:#ffffff17;box-shadow:0 28px 82px #05132633,inset 0 1px #ffffff0e}.demo-number{color:#5b70db;letter-spacing:-.08em;opacity:.11;font-size:4.5rem;font-weight:950;line-height:1;position:absolute;top:.95rem;right:1.2rem}.customer .demo-number{color:#98a8ff;opacity:.18}.demo-icon{color:#fff;background:linear-gradient(135deg,#315cff,#7657ff);border-radius:18px;place-items:center;width:62px;height:62px;font-size:1.45rem;display:grid;box-shadow:0 15px 36px #404ddc38}.customer .demo-icon{background:linear-gradient(135deg,#4eddb2,#5368ff)}.demo-card>span{color:#6577df;letter-spacing:.09em;margin-top:2rem;font-size:.72rem;font-weight:950}.customer>span{color:#98a8ff}.demo-card h2{letter-spacing:-.055em;max-width:520px;margin:.35rem 0 .45rem;font-size:2.6rem;line-height:.95}.demo-card>p{color:#768499;max-width:560px;margin:0;font-size:.86rem;line-height:1.62}.customer>p{color:#9cabbf}.demo-card>p strong{color:inherit}.demo-card ul{grid-template-columns:1fr 1fr;gap:.4rem;margin:1rem 0 0;padding:0;list-style:none;display:grid}.demo-card li{color:#647287;padding-left:1rem;font-size:.76rem;position:relative}.demo-card li:before{content:"✓";color:#2da57e;font-weight:950;position:absolute;left:0}.customer li{color:#bdc9d9}.customer li:before{color:#56deb5}.demo-card>b{border-top:1px solid #11274814;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1.3rem;font-size:.84rem;display:flex}.customer>b{border-color:#ffffff17}.demo-card>b i{color:#fff;background:linear-gradient(135deg,#315cff,#7657ff);border-radius:12px;place-items:center;width:42px;height:42px;font-style:normal;display:grid}.customer>b i{background:#ffffff17}.demo-note{background:#ffffffb3;border:1px solid #11274814;border-radius:15px;align-items:center;gap:.7rem;margin-top:.8rem;padding:.75rem 1rem;display:flex}.demo-note span{color:#6577df;flex:none;font-size:.7rem;font-weight:950}.demo-note p{color:#7f8b9d;margin:0;font-size:.75rem}@media (width<=800px){.demo-select{padding-top:1.5rem}.demo-wrap{width:calc(100% - 24px)}.demo-head{margin-top:1.4rem}.demo-head h1{font-size:clamp(3rem,13vw,4.8rem)}.demo-grid{grid-template-columns:1fr}.demo-card{border-radius:20px;min-height:500px;padding:1rem}.demo-card h2{font-size:2.25rem}.demo-note{flex-direction:column;align-items:flex-start;gap:.2rem}}@media (width<=480px){.demo-card ul{grid-template-columns:1fr}.demo-card{min-height:540px}}
