@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap";:root{color:#161a16;font-synthesis:none;--ink:#171b17;--muted:#687066;--lime:#c8f04a;--lime-dark:#a7cf28;--surface:#fff;--canvas:#f7f8f3;--line:#e5e8df;--purple:#6941c6;background:#e8ebe4;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #6941c6}svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.app-shell{background:var(--canvas);width:100%;min-height:100vh;padding-bottom:92px}.topbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:10;background:#f7f8f3eb;border-bottom:1px solid #1c23180f;justify-content:space-between;align-items:center;height:76px;padding:0 20px;display:flex;position:sticky;top:0}.brand{color:var(--ink);letter-spacing:-.6px;align-items:center;gap:9px;font:800 21px Manrope,sans-serif;text-decoration:none;display:flex}.brand-mark{background:var(--ink);width:34px;height:34px;color:var(--lime);border-radius:10px;place-items:center;display:grid;transform:rotate(-3deg)}.brand-mark svg{fill:currentColor;stroke:none;width:20px}.top-actions{align-items:center;gap:10px;display:flex}.icon-button,.avatar{width:46px;height:46px;color:var(--ink);background:0 0;border:0;border-radius:50%;place-items:center;transition:background .2s;display:grid;position:relative}.icon-button:hover{background:#ecefe7}.status-dot{border:2px solid var(--canvas);background:#ef665b;border-radius:50%;width:8px;height:8px;position:absolute;top:9px;right:10px}.avatar{color:#fff;background:#1d211e;width:40px;height:40px;font-size:13px;font-weight:700}main{width:100%}.hero{padding:42px 20px 26px;position:relative;overflow:hidden}.hero:after{content:"";background:var(--lime);opacity:.42;filter:blur(2px);border-radius:50%;width:170px;height:170px;position:absolute;top:-30px;right:-80px}.eyebrow,.step{color:#697164;letter-spacing:1.8px;margin:0 0 10px;font-size:11px;font-weight:800;line-height:1}.hero h1{letter-spacing:-3px;z-index:1;margin:0;font:800 clamp(42px,12vw,64px)/.96 Manrope,sans-serif;position:relative}.hero h1 span{color:#719300}.hero>p:last-child{max-width:360px;color:var(--muted);margin:20px 0 0;font-size:16px;line-height:1.55}.recharge-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;margin:0 12px;padding:24px 18px;box-shadow:0 16px 50px #1d281212}.section-heading,.plan-header,.recent-heading{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.section-heading h2,.plan-header h2,.recent-heading h2{letter-spacing:-.6px;margin:0;font:750 21px/1.2 Manrope,sans-serif}.secure-pill{color:#49620d;background:#eef7dd;border-radius:999px;align-items:center;gap:5px;padding:7px 10px;font-size:11px;font-weight:700;display:flex}.secure-pill svg{width:15px;height:15px}label{margin:26px 0 8px;font-size:13px;font-weight:700;display:block}.phone-field{border:1.5px solid #d9ded4;border-radius:14px;align-items:center;height:58px;transition:border .2s,box-shadow .2s;display:flex;overflow:hidden}.phone-field:focus-within{border-color:#749700;box-shadow:0 0 0 4px #c8f04a38}.phone-field.valid{border-color:#719300}.country-code{border-right:1px solid var(--line);padding:0 14px 0 16px;font-weight:700}.phone-field input{letter-spacing:.5px;min-width:0;height:100%;color:var(--ink);background:0 0;border:0;outline:0;flex:1;padding:0 13px;font-size:18px}.phone-field input::placeholder{color:#a7ada3}.check{color:#680;stroke-width:2.5px;width:21px;margin-right:15px}.op-chip{letter-spacing:.3px;text-transform:uppercase;border-radius:999px;flex:none;margin-right:12px;padding:4px 9px;font-size:11px;font-weight:800}.helper{color:#848b80;margin:8px 2px 0;font-size:12px}.operator-strip{border:1px solid #0000;border-radius:12px;align-items:center;gap:8px;margin:14px 0 0;padding:10px 12px;font-size:12px;display:flex}.operator-strip strong{letter-spacing:.2px;font-size:13px}.operator-dot{background:currentColor;border-radius:50%;flex:none;width:8px;height:8px;box-shadow:0 0 0 3px #0000000f}.spin{border:2px solid #0000002e;border-top-color:currentColor;border-radius:50%;width:15px;height:15px;margin-left:auto;animation:.7s linear infinite spin}.skeleton{cursor:default;background:linear-gradient(90deg,#eef0ea 25%,#f7f8f4 50%,#eef0ea 75%) 0 0/200% 100%;border:0;border-radius:16px;min-height:79px;animation:1.1s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}.plan-header{align-items:flex-end;margin:30px 0 14px}.text-button{color:#607e00;background:0 0;border:0;min-height:44px;padding:0 4px;font-size:13px;font-weight:800}.plans{gap:10px;display:grid}.plan{border:1.5px solid var(--line);width:100%;min-height:79px;color:var(--ink);text-align:left;background:#fbfcf9;border-radius:16px;grid-template-columns:64px 1fr 24px;align-items:center;gap:10px;padding:15px 14px;transition:border-color .2s,background .2s,box-shadow .2s;display:grid;position:relative}.plan:hover{border-color:#b6c58a}.plan.selected{background:#f7fce9;border-color:#7ca000;box-shadow:inset 0 0 0 1px #7ca000}.price{letter-spacing:-1px;font:800 24px Manrope,sans-serif}.price small{vertical-align:3px;font-size:14px}.plan-details{flex-direction:column;gap:4px;min-width:0;display:flex}.plan-details strong{font-size:14px}.plan-details span{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.radio{border:1.5px solid #b7bdb3;border-radius:50%;place-items:center;width:21px;height:21px;display:grid}.selected .radio{border-color:#709100}.selected .radio span{background:#709100;border-radius:50%;width:11px;height:11px}.plan-tag{background:var(--ink);color:#fff;text-transform:uppercase;letter-spacing:.5px;border-radius:5px;padding:3px 7px;font-size:9px;font-weight:800;position:absolute;top:-7px;left:15px}.pay-button{background:var(--ink);color:#fff;border:0;border-radius:15px;justify-content:space-between;align-items:center;width:100%;height:58px;margin-top:18px;padding:0 18px;font-weight:800;transition:background .2s,opacity .2s;display:flex}.pay-button:not(:disabled):hover{background:#313b24}.pay-button:disabled{cursor:not-allowed;opacity:.42}.terms{text-align:center;color:#90968c;margin:12px 0 0;font-size:10px}.cashback-banner{color:#fff;background:#211b2e;border-radius:18px;grid-template-columns:46px 1fr 44px;align-items:center;gap:12px;margin:16px 12px 0;padding:16px;display:grid}.gift-icon{background:var(--lime);color:#202918;border-radius:12px;place-items:center;width:44px;height:44px;display:grid}.gift-icon svg{width:22px}.cashback-banner div:nth-child(2){flex-direction:column;gap:3px;display:flex}.cashback-banner strong{font-size:14px}.cashback-banner span{color:#bbb3c5;font-size:11px}.cashback-banner button{color:#fff;background:0 0;border:0;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.cashback-banner button:hover{background:#ffffff1a}.recent-section{padding:34px 20px 12px}.recent-heading{align-items:flex-end}.transactions{gap:6px;margin-top:17px;display:grid}.transaction{border-bottom:1px solid var(--line);grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:12px 0;display:grid}.contact-avatar{border-radius:14px;place-items:center;width:46px;height:46px;font-size:12px;font-weight:800;display:grid}.transaction-info,.transaction-amount{flex-direction:column;gap:4px;display:flex}.transaction-info strong{font-size:14px}.transaction-info small{color:var(--muted);font-size:10px}.transaction-amount{align-items:flex-end;font:700 14px Manrope,sans-serif}.transaction-amount small{color:#5d8500;font:700 10px DM Sans,sans-serif}.bottom-nav{z-index:20;height:calc(74px + env(safe-area-inset-bottom));padding:6px 10px env(safe-area-inset-bottom);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff2;grid-template-columns:repeat(4,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.bottom-nav button{color:#8a9186;background:0 0;border:0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:58px;font-size:10px;font-weight:700;display:flex}.bottom-nav svg{width:21px;height:21px}.bottom-nav button.active{color:#577600;background:#f4f9e8}.bottom-nav button.active svg{fill:var(--lime);stroke:#425900}.toast{z-index:60;color:#fff;background:#1f271d;border-radius:12px;width:max-content;max-width:calc(100% - 32px);padding:13px 18px;font-size:13px;font-weight:700;animation:.3s ease-out toast-in;position:fixed;bottom:92px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0003}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}}.pay-overlay{z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#10140e8c;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.pay-sheet{background:var(--canvas);border-radius:26px 26px 0 0;width:100%;max-width:520px;max-height:92vh;padding:22px 20px 30px;overflow-y:auto;box-shadow:0 -18px 60px #00000038}.pay-head{border-bottom:1px solid var(--line);padding-bottom:16px}.pay-title-row{justify-content:space-between;align-items:flex-start;display:flex}.pay-title-row h3{letter-spacing:-1px;margin:0;font:800 26px/1 Manrope,sans-serif}.pay-title-row h3 small{vertical-align:5px;font-size:15px}.pay-close{width:38px;height:38px;color:var(--ink);background:#ecefe7;border:0;border-radius:50%;place-items:center;display:grid}.pay-close svg{width:18px;height:18px}.pay-close:disabled{opacity:.35;cursor:not-allowed}.pay-summary{align-items:center;gap:10px;margin-top:14px;display:flex}.pay-op-chip{border-radius:8px;flex:none;padding:5px 10px;font-size:12px;font-weight:800}.pay-summary-info{flex-direction:column;gap:2px;min-width:0;display:flex}.pay-summary-info strong{letter-spacing:.3px;font-size:15px}.pay-summary-info small{color:var(--muted);font-size:11px}.demo-pill{color:#8a5a00;background:#fff2dc;border-radius:999px;align-items:center;gap:6px;margin-top:12px;padding:6px 10px;font-size:11px;font-weight:700;display:inline-flex}.demo-pill svg{width:14px;height:14px}.pay-body{padding-top:18px}.pay-label{color:var(--muted);margin:0 0 12px;font-size:13px;font-weight:700}.pay-method{border:1.5px solid var(--line);text-align:left;background:#fff;border-radius:15px;align-items:center;gap:12px;width:100%;min-height:64px;margin-bottom:10px;padding:11px 14px;transition:border-color .2s,box-shadow .2s;display:flex;position:relative}.pay-method:hover{border-color:#b6c58a}.pay-method.selected{border-color:#7ca000;box-shadow:inset 0 0 0 1px #7ca000}.pay-method-icon{width:40px;height:40px;color:var(--ink);background:#f3f5ee;border-radius:12px;flex:none;place-items:center;display:grid}.pay-method.selected .pay-method-icon{color:#570;background:#eef6dd}.pay-method-icon svg{width:21px;height:21px}.pay-method-info{flex-direction:column;gap:3px;min-width:0;display:flex}.pay-method-info strong{font-size:14px}.pay-method-info small{color:var(--muted);font-size:11px}.recommended{color:#4c6c00;text-transform:uppercase;letter-spacing:.4px;background:#e9f6d6;border-radius:999px;flex:none;margin-left:auto;padding:4px 8px;font-size:10px;font-weight:800}.pay-body label{color:var(--muted);margin:18px 0 7px;font-size:12px}.pay-body input,.pay-body select{width:100%;height:52px;color:var(--ink);background:#fff;border:1.5px solid #d9ded4;border-radius:13px;padding:0 14px;font-size:16px;transition:border-color .2s,box-shadow .2s}.pay-body input:focus,.pay-body select:focus{border-color:#749700;outline:0;box-shadow:0 0 0 4px #c8f04a38}.pay-body input::placeholder{color:#a7ada3}.use-number{color:#607e00;background:0 0;border:0;margin-top:8px;padding:4px 0;font-size:12px;font-weight:800}.pay-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.pay-row label{margin-top:14px}.pay-cta{background:var(--ink);color:#fff;border:0;border-radius:14px;justify-content:space-between;align-items:center;width:100%;height:56px;margin-top:22px;padding:0 18px;font-weight:800;transition:background .2s,opacity .2s;display:flex}.pay-cta svg{width:20px;height:20px}.pay-cta:not(:disabled):hover{background:#313b24}.pay-cta:disabled{cursor:not-allowed;opacity:.4}.pay-back{width:100%;height:44px;color:var(--muted);background:0 0;border:0;margin-top:10px;font-size:13px;font-weight:700}.pay-center{text-align:center;flex-direction:column;align-items:center;padding-top:26px;display:flex}.pay-center h3{letter-spacing:-.4px;margin:16px 0 0;font:750 20px Manrope,sans-serif}.pay-hint{color:var(--muted);margin:6px 0 0;font-size:13px}.pay-amt{letter-spacing:-1px;margin:18px 0 0;font:800 30px Manrope,sans-serif}.pay-spinner{border:4px solid #e2e7da;border-top-color:#6d9612;border-radius:50%;width:46px;height:46px;animation:.8s linear infinite spin}.pay-check{background:var(--lime);color:#263107;border-radius:50%;place-items:center;width:74px;height:74px;display:grid;box-shadow:0 10px 30px #a7cf2866}.pay-check svg{stroke-width:3px;width:38px;height:38px}.txn-card{border:1px solid var(--line);background:#fff;border-radius:14px;width:100%;margin:22px 0 4px;padding:6px 16px}.txn-card div{border-bottom:1px dashed var(--line);justify-content:space-between;align-items:center;gap:12px;padding:11px 0;display:flex}.txn-card div:last-child{border-bottom:0}.txn-card span{color:var(--muted);font-size:12px}.txn-card strong{text-align:right;font-size:12.5px;font-weight:700}.sheet-enter-active,.sheet-leave-active{transition:opacity .25s}.sheet-enter-active .pay-sheet,.sheet-leave-active .pay-sheet{transition:transform .28s cubic-bezier(.2,.8,.2,1)}.sheet-enter-from,.sheet-leave-to{opacity:0}.sheet-enter-from .pay-sheet,.sheet-leave-to .pay-sheet{transform:translateY(30px)}@media (width>=760px){body{padding:28px}.app-shell{border-radius:30px;max-width:520px;min-height:calc(100vh - 56px);margin:0 auto;position:relative;overflow:hidden;box-shadow:0 24px 80px #1c261629}.bottom-nav{border-radius:0 0 30px 30px;width:520px;bottom:28px;left:50%;right:auto;transform:translate(-50%)}.hero{padding-left:30px;padding-right:30px}.recharge-card,.cashback-banner{margin-left:22px;margin-right:22px}.recent-section{padding-left:30px;padding-right:30px}}@media (width<=360px){.hero h1{font-size:39px}.recharge-card{margin-inline:8px;padding-inline:14px}.plan{grid-template-columns:57px 1fr 22px;padding-inline:11px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}