@import "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap";*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}html,body{margin:0}body{color:#0d0f14;background:#f4f5fb;font-family:Manrope,sans-serif}img{max-width:100%}a{color:inherit}:root{--purple-light:#7b6ef6;--purple-mid:#6355e0;--purple-dark:#4f43c8;--purple-bg:#8176f0;--sms:#d94f2b;--wa:#128c54;--rcs:#2554d4;--ink:#0d0f14;--ink-2:#3d4352;--ink-3:#8891a4;--rule:#0d0f141a;--panel:#fff}.landing-page{background:#f4f5fb;height:100svh;min-height:100svh;display:flex;overflow:hidden}.left-col{background:linear-gradient(135deg,#8e82f5 0%,#7166ee 40%,#5d52dc 100%);flex:50%;justify-content:center;align-items:center;padding:clamp(24px,4svh,48px) clamp(24px,3vw,40px);display:flex;position:relative;overflow:hidden}.left-col:before{content:"";pointer-events:none;background:#ffffff1f;border-radius:50%;width:340px;height:340px;position:absolute;top:-80px;right:-80px}.left-col:after{content:"";pointer-events:none;background:#ffffff14;border-radius:50%;width:300px;height:300px;position:absolute;bottom:-100px;left:-60px}.left-inner{z-index:1;text-align:center;flex-direction:column;align-items:center;width:100%;max-width:440px;display:flex;position:relative}.illus-card{-webkit-backdrop-filter:blur(6px);opacity:0;background:#ffffff26;border:1px solid #ffffff40;border-radius:28px;width:100%;margin-bottom:clamp(20px,3svh,32px);padding:clamp(24px,3.2svh,40px) clamp(24px,2.6vw,32px) clamp(20px,2.8svh,36px);animation:.7s .15s forwards fadeUp}.left-illustration{object-fit:contain;filter:drop-shadow(0 16px 40px #0000002e);width:100%;max-width:min(100%,360px);height:auto;margin:0 auto;display:block}.left-title{color:#fff;letter-spacing:-.02em;opacity:0;margin-bottom:8px;font-size:clamp(1.3rem,2vw,1.55rem);font-weight:800;line-height:1.25;animation:.65s .3s forwards fadeUp}.left-sub{color:#ffffffb8;opacity:0;max-width:320px;font-size:clamp(.76rem,1vw,.82rem);font-weight:400;line-height:1.5;animation:.65s .42s forwards fadeUp}.right-col{background:#fff;flex:50%;justify-content:center;align-items:center;padding:clamp(24px,4svh,52px) clamp(20px,2vw,24px);display:flex}.form-wrap{width:100%;max-width:520px}.brand-logo{opacity:0;width:auto;height:clamp(42px,5.2svh,52px);margin:0 auto clamp(20px,3svh,36px);animation:.6s .1s forwards fadeUp;display:block}.form-heading{color:var(--ink);letter-spacing:-.025em;text-align:center;opacity:0;margin-bottom:6px;font-size:clamp(1.3rem,2vw,1.55rem);font-weight:800;animation:.6s .22s forwards fadeUp}.form-sub{color:var(--ink-3);text-align:center;opacity:0;margin-bottom:clamp(20px,3svh,32px);font-size:clamp(.76rem,1vw,.82rem);animation:.6s .3s forwards fadeUp}.section-label{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:center;opacity:0;justify-content:center;align-items:center;gap:10px;margin-bottom:clamp(12px,2svh,16px);font-size:.68rem;font-weight:600;animation:.6s .38s forwards fadeUp;display:flex}.section-label:before,.section-label:after{content:"";background:var(--rule);width:40px;height:1px}.cards-stack{flex-direction:column;gap:clamp(10px,1.8svh,15px);display:flex}.card{color:inherit;opacity:0;background:#fafafa;border:1.5px solid #0d0f1414;border-radius:18px;align-items:center;gap:clamp(14px,1.8vw,22px);padding:clamp(16px,2.2svh,22px) clamp(18px,2vw,24px);text-decoration:none;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s;display:flex;position:relative;overflow:hidden}.card:first-child{animation:.55s .46s forwards fadeUp}.card:nth-child(2){animation:.55s .56s forwards fadeUp}.card:nth-child(3){animation:.55s .66s forwards fadeUp}.card:before{content:"";opacity:0;border-radius:0 2px 2px 0;width:3px;transition:opacity .25s;position:absolute;top:0;bottom:0;left:0}.card.sms:before{background:var(--sms)}.card.wa:before{background:var(--wa)}.card.rcs:before{background:var(--rcs)}.card:hover{background:#fff;border-color:#0d0f1421;transform:translateY(-2px);box-shadow:0 6px 24px #0d0f1412}.card:hover:before{opacity:1}.card-icon-wrap{border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:clamp(44px,5svh,50px);height:clamp(44px,5svh,50px);transition:transform .25s;display:flex}.card:hover .card-icon-wrap{transform:scale(1.05)}.card.sms .card-icon-wrap{background:#d94f2b14}.card.wa .card-icon-wrap{background:#128c5414}.card.rcs .card-icon-wrap{background:#2554d414}.card-icon-wrap svg{width:clamp(22px,2.8svh,26px);height:clamp(22px,2.8svh,26px)}.card-body{flex:1;min-width:0}.card-tag{letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px;font-size:.6rem;font-weight:700}.card.sms .card-tag{color:var(--sms)}.card.wa .card-tag{color:var(--wa)}.card.rcs .card-tag{color:var(--rcs)}.card-title{letter-spacing:-.01em;color:var(--ink);margin-bottom:3px;font-size:clamp(.94rem,1.2vw,1.02rem);font-weight:700}.card-desc{color:var(--ink-3);white-space:normal;text-overflow:clip;font-size:clamp(.72rem,.95vw,.78rem);font-weight:400;line-height:1.35;overflow:visible}.card-login{min-width:clamp(76px,9vw,88px);height:clamp(32px,4svh,36px);color:var(--ink);letter-spacing:.02em;background:#ffffffeb;border:1.5px solid #0d0f141a;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:0 clamp(12px,1.6vw,16px);font-size:clamp(.7rem,.9vw,.74rem);font-weight:700;transition:background .22s,border-color .22s,color .22s;display:inline-flex}.card.sms:hover .card-login{background:var(--sms);border-color:var(--sms);color:#fff}.card.wa:hover .card-login{background:var(--wa);border-color:var(--wa);color:#fff}.card.rcs:hover .card-login{background:var(--rcs);border-color:var(--rcs);color:#fff}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=820px){.landing-page{flex-direction:column;height:auto;overflow:visible}.left-col{display:none}.right-col{padding:40px 28px 52px}}@media (height<=780px) and (width>=821px){.left-col,.right-col{padding-top:20px;padding-bottom:20px}.illus-card{margin-bottom:18px}.left-title{margin-bottom:6px}.brand-logo,.form-sub{margin-bottom:18px}.cards-stack{gap:10px}.card{padding:14px 18px}}