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

html,
body{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
}

body{
    display:grid;
    place-items:center;
    overflow:hidden;

    background:
    radial-gradient(circle at top,#17366f,#09152d 70%);

    font-family:Arial,sans-serif;
}

.card{
    position:relative;
    z-index:5;

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

    width:min(92vw,420px);

    padding:30px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-radius:28px;
}

.logo-wrap{
    position:relative;

    width:min(70vw,320px);
    aspect-ratio:1;

    display:grid;
    place-items:center;
}

.logo{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    border-radius:50%;
}

.orbit-ring{
    position:absolute;
    inset:-18px;

    border-radius:50%;
    border:2px solid rgba(255,215,120,.18);

    pointer-events:none;
}

.orbit-ring::before{
    content:"";

    position:absolute;
    inset:-3px;

    border-radius:50%;

    background:
        conic-gradient(
            transparent 0deg,
            transparent 300deg,
            #ffd86b 330deg,
            transparent 360deg
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 5px),
            #000 calc(100% - 4px)
        );

    animation:spin 3s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

.background-icons{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.card{
    position:relative;
    z-index:10;
}