:root{
    --primary:#123e70;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:Arial, sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:#081a31;
    color:white;
}
.background{
    position:fixed;
    inset:0;
    background:
      radial-gradient(circle at 20% 20%, rgba(18,62,112,.7), transparent 30%),
      radial-gradient(circle at 80% 30%, rgba(18,62,112,.6), transparent 30%),
      radial-gradient(circle at 50% 80%, rgba(255,255,255,.08), transparent 25%);
    animation: moveBg 12s infinite alternate ease-in-out;
}
@keyframes moveBg{
    from{transform:scale(1) rotate(0deg);}
    to{transform:scale(1.2) rotate(5deg);}
}
.container{
    position:relative;
    z-index:1;
    text-align:center;
    max-width:700px;
    padding:40px;
    backdrop-filter:blur(10px);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
}
h1{
    margin-top:20px;
    letter-spacing:6px;
}
h2{
    color:#b9d4ff;
    margin:15px 0;
}
p{
    line-height:1.7;
    opacity:.9;
}
.loader{
    width:60px;
    height:60px;
    margin:30px auto 15px;
    border:5px solid rgba(255,255,255,.2);
    border-top:5px solid white;
    border-radius:50%;
    animation: spin 1s linear infinite;
}
@keyframes spin{
    to{transform:rotate(360deg)}
}
span{
    font-weight:bold;
    letter-spacing:3px;
}

.logo{
    width:220px;
    max-width:90%;
    height:auto;
    margin-bottom:20px;
    animation: floatLogo 4s ease-in-out infinite;
}

.logo{
    filter:
        drop-shadow(0 0 10px rgba(18,62,112,.4))
        drop-shadow(0 0 25px rgba(18,62,112,.3));
}

@keyframes floatLogo{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

.background-art{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    background:
        radial-gradient(circle at center,
        #123e70 0%,
        #0b2140 45%,
        #061220 100%);
}

.background-art svg{
    width:100%;
    height:100%;
    filter:blur(2px);
}

.stroke{
    fill:none;
    stroke:#4fa3ff;
    stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:2500;
    stroke-dashoffset:2500;
    opacity:.35;
}

.stroke1{
    animation:
        drawLine 10s linear infinite,
        glow 4s ease-in-out infinite;
}

.stroke2{
    animation:
        drawLine 14s linear infinite 2s,
        glow 6s ease-in-out infinite;
}

.stroke3{
    animation:
        drawLine 18s linear infinite 4s,
        glow 5s ease-in-out infinite;
}

@keyframes drawLine{
    0%{
        stroke-dashoffset:2500;
        opacity:0;
    }

    10%{
        opacity:.4;
    }

    50%{
        opacity:.8;
    }

    100%{
        stroke-dashoffset:0;
        opacity:0;
    }
}

@keyframes glow{
    0%,100%{
        filter:drop-shadow(0 0 5px #4fa3ff);
    }

    50%{
        filter:
            drop-shadow(0 0 10px #4fa3ff)
            drop-shadow(0 0 25px #4fa3ff)
            drop-shadow(0 0 40px #4fa3ff);
    }
}

.particles span{
    position:absolute;
    width:6px;
    height:6px;
    background:white;
    border-radius:50%;
    opacity:.15;
    animation:floatParticle 20s linear infinite;
}

.particles span:nth-child(1){left:10%;animation-delay:0s;}
.particles span:nth-child(2){left:30%;animation-delay:4s;}
.particles span:nth-child(3){left:50%;animation-delay:8s;}
.particles span:nth-child(4){left:70%;animation-delay:12s;}
.particles span:nth-child(5){left:90%;animation-delay:16s;}

@keyframes floatParticle{
    from{
        transform:translateY(110vh);
    }
    to{
        transform:translateY(-20vh);
    }
}