@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap');

html, body {
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
}

body {
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    overflow-x:hidden;
    font-family:Vazirmatn,Tahoma,sans-serif;
    direction:rtl;
    color:#fff;
    background:
    radial-gradient(circle at 90% 10%, rgba(56,189,248,.7), transparent 35%),
    radial-gradient(circle at 10% 90%, rgba(192,132,252,.7), transparent 35%),
    linear-gradient(135deg,#020617,#172554);
}

* {
    box-sizing:border-box;
}

.light {
    position:fixed;
    border-radius:50%;
    filter:blur(90px);
    z-index:0;
}

.l1 {
    width:35vw;
    height:35vw;
    min-width:180px;
    min-height:180px;
    top:-100px;
    right:-100px;
    background:#38bdf8;
}

.l2 {
    width:35vw;
    height:35vw;
    min-width:160px;
    min-height:160px;
    bottom:-100px;
    left:-100px;
    background:#c084fc;
}

.glass-box {
    position:relative;
    z-index:2;
    width:100%;
    max-width:520px;
    margin:auto;
    padding:clamp(20px,5vw,50px);
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.3);
    border-radius:clamp(18px,5vw,35px);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    text-align:center;
}

.logo {
    display:block;
    max-width:100%;
    width:auto;
    height:auto;
    max-height:100px;
    margin:0 auto 20px;
}

h1 {
    margin:0 auto 15px;
    font-size:clamp(20px,6vw,34px);
    line-height:1.5;
    font-weight:900;
}

p {
    margin:0;
    font-size:clamp(15px,4vw,20px);
    line-height:2;
}

.loading {
    margin-top:25px;
}

.loading i {
    display:inline-block;
    width:10px;
    height:10px;
    margin:4px;
    background:#fff;
    border-radius:50%;
    animation:bounce 1s infinite;
}

.loading i:nth-child(2){animation-delay:.2s}
.loading i:nth-child(3){animation-delay:.4s}

@keyframes bounce {
    50% {transform:translateY(-8px)}
}

@media (max-width:600px) {

    body {
        padding:12px;
    }

    .glass-box {
        width:100%;
        max-width:none;
    }

    p {
        word-break:break-word;
    }
}