*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Arial,Helvetica,sans-serif;
background:linear-gradient(180deg,#081221,#0d1f34);
color:#fff;
min-height:100vh;
}
.background{
position:fixed;inset:0;
background:radial-gradient(circle at top,#1e88ff22,transparent 60%);
pointer-events:none;
}
.app{max-width:430px;margin:auto;padding:24px;position:relative}
.logo{text-align:center;margin-bottom:22px}
.logo-icon{width:70px;height:70px;border-radius:22px;margin:auto;
background:linear-gradient(135deg,#2997ff,#36d96f);
box-shadow:0 12px 30px rgba(0,0,0,.35)}
.logo h1{font-size:40px;margin-top:14px}
.logo p{opacity:.8;margin-top:8px}
.timer-card,.plan{
background:rgba(255,255,255,.06);
backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:22px;
margin-bottom:18px;
}
.timer-card{text-align:center}
.timer-card h2{font-size:56px;color:#38e27a;margin:10px 0}
.progress{height:10px;background:#2c4258;border-radius:99px;overflow:hidden}
.progress div{height:100%;width:100%;background:linear-gradient(90deg,#38e27a,#2997ff)}
.plan h3{font-size:15px;opacity:.8}
.plan h1{font-size:42px;margin:8px 0}
.plan p{opacity:.8;margin-bottom:18px}
.buy{
width:100%;padding:16px;border:none;border-radius:16px;
background:#2997ff;color:#fff;font-weight:700;cursor:pointer}
.featured{
border:2px solid #36d96f;
box-shadow:0 0 30px rgba(54,217,111,.2)}
.badge{
display:inline-block;
background:#36d96f;
padding:8px 14px;
border-radius:99px;
font-size:12px;
font-weight:bold;
margin-bottom:14px}
.featuredButton{
background:#36d96f;
animation:pulse 2s infinite}
.whatsapp{
position:fixed;right:18px;bottom:18px}
.whatsapp a{
display:flex;width:52px;height:52px;border-radius:50%;
align-items:center;justify-content:center;
background:#25D366;color:#fff;text-decoration:none;font-size:24px;
box-shadow:0 8px 24px rgba(0,0,0,.3)}
.screen{
display:none;position:fixed;inset:0;
background:rgba(0,0,0,.72);
backdrop-filter:blur(10px);
align-items:center;justify-content:center;
padding:20px}
.modal,.success{
width:100%;max-width:420px;
background:#152b44;
border-radius:28px;
padding:28px}
.loader{
width:42px;height:42px;border:4px solid #2997ff;
border-top-color:#36d96f;border-radius:50%;
margin:20px auto;animation:spin 1s linear infinite}
.qr{
height:250px;border-radius:18px;background:#fff;color:#000;
display:flex;align-items:center;justify-content:center;
margin:20px 0}
textarea{
width:100%;height:80px;border-radius:12px;padding:10px}
#copyPix,#paid,#navigate{
width:100%;margin-top:12px;padding:16px;border:none;border-radius:16px;
font-weight:bold}
#copyPix{background:#2997ff;color:#fff}
#paid,#navigate{background:#36d96f;color:#fff}
.success{text-align:center}
.successIcon{
width:90px;height:90px;border-radius:50%;
background:#36d96f;display:flex;align-items:center;justify-content:center;
font-size:46px;margin:0 auto 20px}
@keyframes pulse{
50%{transform:scale(1.03)}
}
@keyframes spin{
to{transform:rotate(360deg)}
}