*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,Arial,sans-serif;
}

body{
    background:#0b1220;
    overflow:hidden;
    color:white;
}

.bg{
    position:fixed;
    width:200%;
    height:200%;
    background:
    radial-gradient(circle,#3b82f6 0%,transparent 30%),
    radial-gradient(circle,#06b6d4 0%,transparent 30%),
    radial-gradient(circle,#8b5cf6 0%,transparent 30%);
    background-size:600px 600px;
    animation:move 25s linear infinite;
    opacity:.15;
}

@keyframes move{

0%{
transform:translate(-20%,-20%) rotate(0deg);
}

100%{
transform:translate(-10%,-10%) rotate(360deg);
}

}

.container{

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-50%);

width:90%;
max-width:700px;

text-align:center;

padding:60px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.15);

border-radius:25px;

backdrop-filter:blur(15px);

box-shadow:
0 20px 60px rgba(0,0,0,.4);

}

.logo{

display:flex;

justify-content:center;

margin-bottom:30px;

}

.circle{

width:110px;

height:110px;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#06b6d4);

box-shadow:
0 0 40px rgba(37,99,235,.6);

animation:pulse 2s infinite;

}

@keyframes pulse{

50%{

transform:scale(1.08);

box-shadow:
0 0 70px rgba(37,99,235,.9);

}

}

h1{

font-size:52px;

margin-bottom:15px;

}

p{

font-size:20px;

opacity:.85;

margin-bottom:35px;

}

.status{

display:inline-flex;

align-items:center;

padding:14px 30px;

border-radius:40px;

background:#16a34a;

font-size:18px;

font-weight:600;

}

.dot{

width:12px;

height:12px;

background:#fff;

border-radius:50%;

margin-right:12px;

animation:blink 1.5s infinite;

}

@keyframes blink{

50%{

opacity:.3;

}

}

@media(max-width:700px){

.container{

padding:35px;

}

h1{

font-size:38px;

}

p{

font-size:18px;

}

}