*{box-sizing:border-box}
html,body{margin:0;background:#0a0b14;color:#eef0ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid #5ef0ff;outline-offset:2px}
.app{min-height:100vh;padding-bottom:80px;background:radial-gradient(circle at 80% -10%,#3a1d7a55,transparent 50%),radial-gradient(circle at 0 30%,#ff6a0033,transparent 40%)}
.top{position:sticky;top:0;z-index:5;padding:14px 18px;background:#0a0b14cc;backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:22px;letter-spacing:-.5px}
.logo span{color:#ff8a1f}
.main{max-width:720px;margin:0 auto;padding:16px}
.hero{padding:22px 4px 8px}
.chip{display:inline-block;font-size:12px;padding:6px 10px;border-radius:99px;background:#ff8a1f22;color:#ffb066;border:1px solid #ff8a1f55}
.hero h1{font-size:30px;line-height:1.1;margin:14px 0 8px;font-weight:900}
.hero em{font-style:normal;background:linear-gradient(90deg,#5ef0ff,#a58bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#a9adc9;margin:0}
.h2{font-size:18px;margin:24px 0 12px;scroll-margin-top:70px}
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.packs{grid-template-columns:repeat(4,1fr)}}
.pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px 12px;border-radius:16px;
background:linear-gradient(180deg,#171a2e,#10121f);border:1px solid #ffffff14;color:inherit;transition:.15s}
.pack:active{transform:scale(.97)}
.pack.on{border-color:#5ef0ff;box-shadow:0 0 0 1px #5ef0ff,0 8px 30px #5ef0ff33}
.pack strong{font-size:15px;text-align:center}
.pack small{color:#7ee8a0;font-size:12px}
.price{margin-top:6px;font-weight:800;color:#ffb066}
.tag{position:absolute;top:-8px;right:8px;font-size:10px;font-weight:800;padding:3px 7px;border-radius:6px;background:#ff8a1f;color:#1a0c00}
.panel{margin-top:18px;padding:16px;border-radius:18px;background:#13152499;border:1px solid #ffffff14;display:flex;flex-direction:column;gap:12px}
.panel .h2{margin:0}
.summary{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;background:#0a0b14}
.summary b{margin-left:auto;color:#ffb066}
.lbl{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#a9adc9;font-weight:600}
.inp{width:100%;padding:14px;border-radius:12px;border:1px solid #ffffff22;background:#0a0b14;color:#fff;font-size:16px}
.pays{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pay{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;border:1px solid #ffffff22;background:#0a0b14;color:#fff;font-size:14px}
.pay.on{border-color:#5ef0ff;background:#5ef0ff14}
.dot{width:12px;height:12px;border-radius:50%;flex:none}.mtn{background:#ffcb05}.airtel{background:#e40000}
.cta{padding:16px;border:0;border-radius:14px;font-weight:900;font-size:16px;color:#1a0c00;background:linear-gradient(90deg,#ff8a1f,#ffc04d)}
.cta:disabled{opacity:.6}
.ghost{padding:12px;border-radius:12px;border:1px solid #ffffff33;background:none;color:#fff}
.err{padding:10px 12px;border-radius:10px;background:#ff3b5c22;border:1px solid #ff3b5c66;color:#ffb3c0;font-size:14px}
.ok p{margin:0}
.code{font-size:28px;font-weight:900;letter-spacing:2px;text-align:center;padding:14px;border-radius:12px;background:#0a0b14;color:#5ef0ff;border:1px dashed #5ef0ff66}
.muted{color:#a9adc9;font-size:14px}
.result{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:#0a0b14}
.result div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.result span{color:#a9adc9}.st{color:#ffb066}
.tabs{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;background:#0e1020f2;border-top:1px solid #ffffff14;backdrop-filter:blur(10px)}
.tabs button{padding:16px;border:0;background:none;color:#a9adc9;font-weight:700}
.tabs .on{color:#5ef0ff;box-shadow:inset 0 2px 0 #5ef0ff}