:root{--blue:#0757b8;--blue2:#0b75e5;--green:#16b978;--green2:#ddf8ed;--yellow:#ffc83d;--purple:#7657d9;--navy:#10233f;--bg:#f4f8fc;--white:#fff;--text:#17202b;--muted:#718096;--line:#e4eaf1;--red:#df4350}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,Arial,sans-serif}button{font:inherit;cursor:pointer;border:0}.top{border-bottom:1px solid var(--line);z-index:20;background:#fff;align-items:center;gap:30px;height:74px;padding:0 5%;display:flex;position:sticky;top:0}.logo{letter-spacing:-1.5px;color:var(--navy);font-size:28px;font-weight:950}.logo span{color:var(--green)}.nav{gap:20px;display:flex}.nav button{color:#405065;background:0 0;font-size:13px;font-weight:800}.nav .active{color:var(--blue)}.right{align-items:center;gap:11px;margin-left:auto;display:flex}.wallet{background:var(--green2);color:#087a50;border-radius:10px;padding:9px 13px;font-size:12px;font-weight:900}.avatar{background:linear-gradient(135deg,var(--blue2),var(--green));color:#fff;border-radius:50%;width:39px;height:39px;font-weight:900}.wrap{max-width:1240px;margin:auto;padding:32px 5%}.head{justify-content:space-between;align-items:end;gap:20px;display:flex}.head h1{letter-spacing:-1px;margin:0 0 5px;font-size:34px}.head p{color:var(--muted);margin:0}.balance{color:#fff;background:linear-gradient(120deg,#07356d,#0757b8);border-radius:13px;padding:13px 17px;font-size:12px;font-weight:900}.balance span{color:#75efbf;font-size:18px}.tabs{flex-wrap:wrap;gap:8px;margin:25px 0 17px;display:flex}.tab{border:1px solid var(--line);color:#56657a;background:#fff;border-radius:9px;padding:10px 15px;font-size:12px;font-weight:850}.tab.active{background:var(--blue);border-color:var(--blue);color:#fff}.grid{grid-template-columns:repeat(3,1fr);gap:17px;display:grid}.card{border:1px solid var(--line);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 25px #10233f0f}.visual{color:#fff;background:linear-gradient(135deg,#0757b8,#16b978);flex-direction:column;justify-content:space-between;height:150px;padding:17px;display:flex}.visual.purple{background:linear-gradient(135deg,#7657d9,#10233f)}.visual.yellow{color:#17202b;background:linear-gradient(135deg,#f0a800,#ffc83d)}.visual.dark{background:linear-gradient(135deg,#10233f,#0757b8)}.tag{text-transform:uppercase;letter-spacing:1px;font-size:9px;font-weight:950}.visual strong{font-size:23px;line-height:1.05}.body{padding:17px}.body h3{margin:0 0 5px;font-size:17px}.small{color:var(--muted);font-size:12px;line-height:1.45}.cost{justify-content:space-between;align-items:center;margin-top:15px;display:flex}.price{color:var(--green);font-size:19px;font-weight:950}.btn{border-radius:9px;padding:10px 13px;font-size:11px;font-weight:900}.primary{background:var(--blue);color:#fff}.greenbtn{background:var(--green);color:#fff}.soft{background:var(--green2);color:#087a50}.section{margin-top:32px}.section h2{margin:0 0 15px;font-size:23px}.featured{grid-template-columns:1.35fr .65fr;gap:17px;display:grid}.feature{color:#fff;background:linear-gradient(120deg,#07356d,#0b75e5);border-radius:20px;flex-direction:column;justify-content:end;min-height:220px;padding:24px;display:flex}.feature h2{margin:7px 0;font-size:30px}.feature .btn{width:max-content;color:var(--blue);background:#fff}.walletbox{border:1px solid var(--line);background:#fff;border-radius:20px;padding:24px}.walletbox .big{color:var(--blue);font-size:40px;font-weight:950}.walletbox .big span{color:var(--green)}.progress{background:#e8edf2;border-radius:99px;height:8px;margin:15px 0;overflow:hidden}.progress i{background:linear-gradient(90deg,var(--blue2),var(--green));width:72%;height:100%;display:block}.redeem{display:none}.redeem.show{display:block}.detail{z-index:50;background:#0007;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.modal{background:#fff;border-radius:22px;width:100%;max-width:540px;overflow:hidden;box-shadow:0 30px 80px #0004}.modal .visual{height:170px}.modalbody{padding:23px}.close{float:right;color:#fff;background:#fff5;border-radius:50%;width:34px;height:34px;font-size:18px}.rule{color:#536276;background:#f6f9fc;border-radius:10px;margin:12px 0;padding:12px;font-size:12px}.code{color:#087a50;text-align:center;letter-spacing:2px;background:#eef8f3;border:1px dashed #8bd7b7;border-radius:10px;margin-top:15px;padding:15px;font-size:22px;font-weight:950}.toast{background:var(--navy);color:#fff;z-index:100;border-radius:10px;padding:13px 17px;display:none;position:fixed;bottom:20px;right:20px}.toast.show{display:block}@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}.featured{grid-template-columns:1fr}.nav{display:none}}@media (max-width:580px){.wrap{padding:25px 5%}.grid{grid-template-columns:1fr}.head{flex-direction:column;align-items:flex-start}.wallet{display:none}}