:root{

--bg:#f8fafc;
--text:#0f172a;
--muted:#64748b;
--blue:#2563eb;
--border:#e2e8f0;

}



*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

font-family:"Inter",sans-serif;

background:var(--bg);

color:var(--text);

min-height:100vh;

display:flex;

flex-direction:column;

}





header{

padding:35px 8%;

}



.logo img{

width:140px;

}





main{

flex:1;

}





.hero{

max-width:900px;

margin:auto;

padding:100px 8% 80px;

}





.tag{

color:var(--blue);

font-weight:600;

letter-spacing:2px;

font-size:13px;

text-transform:uppercase;

margin-bottom:35px;

}





h1{

font-size:clamp(50px,7vw,90px);

line-height:1;

letter-spacing:-4px;

font-weight:800;

}



.desc{

margin-top:30px;

max-width:600px;

font-size:20px;

color:var(--muted);

}





.status{

margin-top:35px;

display:flex;

align-items:center;

gap:12px;

font-size:14px;

color:var(--muted);

}



.dot{

width:10px;

height:10px;

background:var(--blue);

border-radius:50%;

}





.button{

display:inline-block;

margin-top:35px;

padding:16px 35px;

background:var(--blue);

color:white;

text-decoration:none;

border-radius:999px;

font-weight:600;

}







.info{

max-width:900px;

margin:auto;

padding:50px 8%;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

}



.info div{

border-top:1px solid var(--border);

padding-top:25px;

}



.info span{

color:var(--blue);

font-weight:700;

}



.info h3{

font-size:24px;

margin:15px 0;

}



.info p{

color:var(--muted);

}





footer{

padding:40px;

text-align:center;

color:var(--muted);

}




@media(max-width:800px){


.info{

grid-template-columns:1fr;

}


}

/* BACKGROUND MOTION */


body{
    overflow-x:hidden;
    position:relative;
}



.background-shape{

    position:absolute;

    width:500px;
    height:500px;

    background:#2563eb;

    opacity:.08;

    filter:blur(100px);

    border-radius:50%;

    top:100px;

    right:-150px;

    animation:float 8s ease-in-out infinite;

    z-index:-1;

}



.grid-bg{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
        rgba(37,99,235,.04) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(37,99,235,.04) 1px,
        transparent 1px
    );

    background-size:80px 80px;

    mask-image:linear-gradient(
        to bottom,
        black,
        transparent
    );

    z-index:-2;

}




@keyframes float{

    0%,100%{

        transform:
        translateY(0)
        translateX(0);

    }


    50%{

        transform:
        translateY(-30px)
        translateX(-20px);

    }

}




/* LOAD ANIMATION */


.hero{

    animation:appear .9s ease forwards;

}



@keyframes appear{

from{

    opacity:0;

    transform:
    translateY(30px);

}


to{

    opacity:1;

    transform:
    translateY(0);

}

}




/* STATUS DOT */


.dot{

animation:pulse 2s infinite;

}



@keyframes pulse{


0%{

box-shadow:
0 0 0 0 rgba(37,99,235,.5);

}



70%{

box-shadow:
0 0 0 12px rgba(37,99,235,0);

}



100%{

box-shadow:none;

}


}