* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

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

    background:
        radial-gradient(
            circle at top,
            #182848 0%,
            #080b14 40%,
            #030409 100%
        );

    color: #e5e7eb;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        sans-serif;

    overflow-x: hidden;

}


.stars {

    position: fixed;

    inset: 0;

    background-image:
        radial-gradient(
            white 1px,
            transparent 1px
        );

    background-size:
        120px 120px;

    opacity: .15;

    animation:
        drift 80s linear infinite;

}


@keyframes drift {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-120px);
    }

}


main {

    width: min(900px, 90%);

    text-align: center;

    animation:
        fadeIn 1.5s ease;

}


@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


h1 {

    font-size:
        clamp(2.5rem, 7vw, 4.5rem);

    letter-spacing:
        .35em;

    margin-left:
        .35em;

}


.subtitle {

    color:
        #aeb6d8;

    font-size:
        1.2rem;

}


.divider {

    height:
        1px;

    background:
        rgba(255,255,255,.15);

    margin:
        50px auto;

    width:
        60%;

}



.services {

    display:
        grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:
        25px;

}



.card {

    text-decoration:
        none;

    color:
        inherit;

    padding:
        30px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.05);

    backdrop-filter:
        blur(12px);

    transition:
        .3s ease;

}



.card:hover {

    transform:
        translateY(-8px);

    border-color:
        #8ea7ff;

}



.icon {

    font-size:
        2rem;

    color:
        #8ea7ff;

}



.card h2 {

    letter-spacing:
        .15em;

}



.card p {

    color:
        #b8bfd6;

}



.card span {

    font-size:
        .9rem;

    color:
        #8ea7ff;

}



.status {

    margin-top:
        50px;

}


.online {

    display:
        inline-block;

    width:
        10px;

    height:
        10px;

    background:
        #4ade80;

    border-radius:
        50%;

    margin-right:
        8px;

}



footer {

    margin-top:
        70px;

    color:
        #7f879f;

}


footer small {

    font-style:
        italic;

}