*{box-sizing:border-box} :root{--bg:#0d0718;--panel:#1a1029;--purple:#a66bff;--light:#d9c1ff;--muted:#a99bbd}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -10%,#39205c 0%,#160d25 42%,#090611 100%);color:#fff;font-family:"Plus Jakarta Sans",sans-serif;overflow-x:hidden}
.ambient{position:fixed;border-radius:50%;filter:blur(90px);opacity:.22;pointer-events:none}.ambient-one{width:260px;height:260px;background:#8d38ff;top:18%;left:-150px}.ambient-two{width:300px;height:300px;background:#5124ad;right:-180px;top:55%}
.page{width:min(100% - 36px,620px);margin:auto;position:relative;z-index:1;padding:25px 0 22px}
.topbar{display:flex;align-items:center;gap:12px}.brand-mark,.footer-logo{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#d8b8ff,#7632cf 58%,#32105e);box-shadow:inset 2px 2px 5px #ffffff80,inset -4px -5px 9px #1a073e,0 7px 22px #8c43e955;font-size:21px;font-weight:800}.brand-mark span,.orb-inner span{color:#4c1b80}.brand-copy{display:grid;gap:3px}.brand-copy strong{font-size:13px;letter-spacing:1.8px}.brand-copy strong span{color:#c49aff}.brand-copy small{font-size:8px;letter-spacing:2px;color:#9e8eaf}.secure{margin-left:auto;border:1px solid #ffffff20;padding:8px 11px;border-radius:30px;font-size:8px;letter-spacing:1.4px;color:#d7c3f1}.secure i,.eyebrow span,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a9ffcf;box-shadow:0 0 10px #a9ffcf;margin-right:6px}
.hero{position:relative;padding:66px 0 44px;min-height:265px}.eyebrow{font-size:9px;letter-spacing:2px;color:#cbb5e7}.eyebrow span{background:#bd8aff;box-shadow:0 0 12px #bd8aff}h1{font-size:clamp(43px,11vw,68px);line-height:.98;letter-spacing:-3px;margin:18px 0 13px;font-weight:800}h1 em{font-style:normal;color:#c59aff;text-shadow:0 5px 25px #8e49d866}.hero p{font-size:12px;color:#b9a9ca;max-width:280px;line-height:1.7}.hero-orb{position:absolute;width:130px;height:130px;right:18px;top:73px;border-radius:50%;background:linear-gradient(145deg,#d8c0ff,#8c4bd6 45%,#35105d 78%);box-shadow:inset 9px 9px 18px #ffffff75,inset -14px -16px 24px #18052e,0 20px 45px #0008,0 0 45px #a25bff45;display:grid;place-items:center;transform:rotate(-13deg)}.orb-inner{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f2e8ff,#a66bdf 55%,#502080);box-shadow:inset 4px 5px 9px #fff9,inset -5px -7px 10px #351052;color:#38115c;font-size:43px;font-weight:800}
.methods,.qris-section{margin-top:14px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:0 2px 15px}.section-heading small{font-size:8px;letter-spacing:2px;color:#a78ac7}.section-heading h2{font-size:19px;margin:5px 0 0;letter-spacing:-.5px}.section-icon{width:32px;height:32px;border-radius:11px;background:#ffffff0d;border:1px solid #ffffff18;display:grid;place-items:center;color:#caa5ff}
.pay-card{padding:19px 20px 18px;border:1px solid #ffffff1b;border-radius:22px;background:linear-gradient(145deg,#2a1b3d,#171020 72%);box-shadow:0 16px 35px #0005,inset 1px 1px 0 #ffffff14;margin-bottom:13px;position:relative;overflow:hidden}.pay-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-55px;top:-80px;background:#a45cff17;filter:blur(2px)}.card-top{display:flex;align-items:center;justify-content:space-between}.bank-logo{width:37px;height:37px;border-radius:13px;display:grid;place-items:center;font-size:19px;font-weight:800;box-shadow:inset 1px 1px 3px #fff8,0 5px 13px #0005}.sea-logo{background:linear-gradient(145deg,#b8fff0,#16a58b);color:#07594b}.dana-logo{background:linear-gradient(145deg,#9dd5ff,#2478dc);color:#fff}.method-tag{font-size:8px;letter-spacing:1.5px;color:#bda8d5;border:1px solid #ffffff20;padding:6px 9px;border-radius:20px}.bank-name{font-size:17px;font-weight:800;margin-top:15px}.account-label{font-size:8px;letter-spacing:1.6px;color:#9f8eaf;margin-top:15px}.account-row{display:flex;align-items:center;justify-content:space-between;margin-top:5px}.account-row strong{font-size:27px;letter-spacing:2px}.copy-btn{border:1px solid #b88bff66;background:#6e3baa35;color:#e4d2ff;padding:9px 12px;border-radius:10px;font-size:9px;letter-spacing:1px;font-weight:700;cursor:pointer}.copy-btn b{margin-left:5px}.copy-btn:active{transform:scale(.96)}.owner{font-size:11px;color:#aa9ab9;margin-top:9px}.owner strong{color:#fff;margin-left:3px}
.qris-card{padding:18px;border-radius:24px;background:linear-gradient(145deg,#2b1a42,#140d20);border:1px solid #ffffff24;box-shadow:0 18px 40px #0007,inset 1px 1px 0 #ffffff18}.qris-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.qris-head div{display:grid;gap:5px}.qris-head strong{font-size:12px;letter-spacing:2px}.qris-head small{font-size:9px;color:#a99ab9}.live-dot{margin:0}.qr-frame{width:min(100%,390px);aspect-ratio:1;margin:auto;background:#fff;border-radius:17px;padding:12px;display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 25px #0005}.qr-frame img{display:none;width:100%;height:100%;object-fit:contain}.qr-frame img.ready{display:block}.qr-placeholder{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#38244c;border:2px dashed #c9b4df;border-radius:10px;background:repeating-linear-gradient(45deg,#fff,#fff 12px,#f8f4fc 12px,#f8f4fc 24px)}.qr-symbol{font-size:64px;line-height:1;color:#7444a6}.qr-placeholder strong{font-size:12px;letter-spacing:1px;margin-top:10px}.qr-placeholder span{font-size:10px;line-height:1.7;color:#776889;margin-top:8px}.qris-footer{display:flex;justify-content:space-between;margin-top:15px;font-size:8px;letter-spacing:1.4px;color:#c1acd9}.notice{display:flex;gap:12px;align-items:center;margin:20px 2px;padding:13px 15px;border-radius:14px;background:#a36be414;border:1px solid #b98aff22}.notice span{color:#d1aaff;font-size:18px}.notice p{font-size:9px;line-height:1.6;color:#b8a8c8;margin:0}footer{display:flex;align-items:center;gap:9px;border-top:1px solid #ffffff17;padding-top:18px;color:#847593;font-size:8px;letter-spacing:1.3px}.footer-logo{width:25px;height:25px;font-size:12px}footer span:last-child{margin-left:auto;color:#b99bdd}#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;background:#f1e7ff;color:#34164f;padding:11px 17px;border-radius:30px;font-size:11px;font-weight:700;box-shadow:0 8px 30px #0008;transition:.25s;pointer-events:none;z-index:5}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:420px){.hero-orb{width:105px;height:105px;right:2px;top:83px}.orb-inner{width:68px;height:68px;font-size:35px}.hero{padding-top:55px}h1{font-size:48px}.account-row strong{font-size:24px}}