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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#050505;
    --primary:#25F4EE;
    --text:#ffffff;
    --text2:#cfcfcf;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:"Vazirmatn",sans-serif;
    overflow-x:hidden;
}

/* ---------- Splash ---------- */

#splash{
    position:fixed;
    inset:0;
    background:#050505;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:999;
}

#logo{
    width:75vw;
    max-width:420px;

    filter:drop-shadow(0 0 35px rgba(37,244,238,.45));

    animation: logoIntro 2.8s ease-in-out;
}

.brand{
    font-family:"Poppins",sans-serif;
    color:var(--primary);
    margin-top:20px;
}

#splash p{
    margin-top:10px;
    color:var(--text2);
}

/* ---------- Main ---------- */

#main{
    display:none;
    padding:25px;
    min-height:100vh;
}

header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:40px;
}

.smallLogo{
    width:50px;
}

.hero{
    text-align:center;
}

.hero h1{
    font-size:32px;
    margin-bottom:20px;
}

.heroText{
    color:var(--text2);
    line-height:2;
    margin-bottom:35px;
}

.button{
    display:inline-block;
    background:var(--primary);
    color:#000;
    text-decoration:none;
    padding:16px 34px;
    border-radius:15px;
    font-weight:bold;
    transition:.3s;
}

.button:hover{
    transform:scale(1.05);
}
@keyframes logoIntro{

    0%{
        opacity:0;
        transform:scale(.45) rotate(-8deg);
    }

    40%{
        opacity:1;
        transform:scale(1.08) rotate(2deg);
    }

    70%{
        transform:scale(.98);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}