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

body{
    font-family:'Inter',sans-serif;
    background:#f7fafc;
    color:#0f172a;
    overflow:hidden;
}

.background{

    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at top,#7dd3fc22,transparent 45%),
    radial-gradient(circle at bottom,#38bdf822,transparent 40%);

    z-index:-1;
}

.hero{

    height:100vh;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;

    padding:40px;
}

.logo{

    width:150px;
    margin-bottom:30px;

    filter:drop-shadow(0 10px 20px rgba(0,0,0,.08));
}

h1{

    font-size:3.6rem;
    font-weight:700;

    color:#0369a1;

    margin-bottom:20px;
}

.subtitle{

    max-width:650px;

    color:#475569;

    font-size:1.15rem;
    line-height:1.8;

    margin-bottom:40px;
}

.buttons{

    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.btn{

    text-decoration:none;

    padding:14px 28px;

    border-radius:10px;

    transition:.25s;

    font-weight:600;
}

.primary{

    background:#0891b2;
    color:white;
}

.primary:hover{

    background:#0369a1;
}

.secondary{

    border:2px solid #0891b2;
    color:#0891b2;
}

.secondary:hover{

    background:#0891b2;
    color:white;
}

footer{

    position:fixed;
    bottom:25px;
    width:100%;

    text-align:center;

    color:#94a3b8;
    font-size:.9rem;
}

@media(max-width:700px){

    h1{
        font-size:2.5rem;
    }

    .logo{
        width:120px;
    }

}