:root{
--bg:#040816;
--glass:rgba(255,255,255,.07);
--border:rgba(255,255,255,.14);
--text:#fff;
--muted:#98a2b3;
--green:#00e676;
--blue:#3b82f6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Inter,sans-serif;
background:radial-gradient(circle at top,#0b1530,#040816 70%);
color:var(--text);
overflow:hidden;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.bg-grid{
position:fixed;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:50px 50px;
animation:gridMove 25s linear infinite;
}
@keyframes gridMove{
from{transform:translateY(0)}
to{transform:translateY(50px)}
}
.orb{
position:fixed;border-radius:50%;
filter:blur(70px);
opacity:.25;
animation:float 10s ease-in-out infinite;
}
.orb1{width:320px;height:320px;background:#00e676;left:-100px;top:-60px;}
.orb2{width:300px;height:300px;background:#3b82f6;right:-80px;bottom:-80px;animation-delay:2s;}
@keyframes float{
50%{transform:translateY(-30px) translateX(15px);}
}
.chart{
position:fixed;
width:100%;
height:300px;
top:18%;
opacity:.08;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='300'%3E%3Cpolyline fill='none' stroke='%2300e676' stroke-width='3' points='0,220 150,170 260,180 420,90 560,140 700,80 880,150 1060,70 1220,130 1420,60 1600,100'/%3E%3C/svg%3E") center/cover no-repeat;
animation:pulse 8s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.14}}
.wrap{position:relative;z-index:2;padding:20px;width:100%;display:flex;justify-content:center}
.glass{
width:min(90%,680px);
padding:60px 45px;
text-align:center;
background:var(--glass);
border:1px solid var(--border);
border-radius:28px;
backdrop-filter:blur(24px);
box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.badge{
display:inline-block;
padding:8px 16px;
border:1px solid rgba(0,230,118,.35);
border-radius:999px;
font-size:.8rem;
letter-spacing:2px;
color:#bfffdc;
margin-bottom:24px;
}
h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800}
h2{margin-top:10px;color:var(--green);font-weight:500}
p{margin:28px auto;color:var(--muted);max-width:520px;line-height:1.8}
.btn{
display:inline-block;
padding:15px 34px;
background:linear-gradient(135deg,var(--green),var(--blue));
color:white;
text-decoration:none;
border-radius:999px;
font-weight:700;
transition:.3s;
box-shadow:0 0 25px rgba(0,230,118,.35);
}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.stores{
display:flex;
gap:18px;
justify-content:center;
margin-top:40px;
flex-wrap:wrap;
}
.store{
padding:18px 26px;
border:1px solid var(--border);
border-radius:16px;
background:rgba(255,255,255,.04);
min-width:180px;
}
.store span{font-size:.8rem;color:var(--muted)}
footer{
position:fixed;
bottom:20px;
color:#7d8699;
font-size:.85rem;
z-index:2;
}
@media(max-width:600px){
.glass{padding:40px 24px}
}