*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:top;
    background: url("assets/background.jpg") center center/cover no-repeat;
    padding:20px;
}

.container{
     width:100%;
    max-width:420px;
    padding:20px;
    text-align:center;
    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
}

.logo{
    width:200%;
    max-width:220px;
    border-radius:20px;
    display:block;
    margin:0 auto 20px;
}

h1{
    color:#fff;
    font-size:42px;
    margin-bottom:15px;
    text-shadow:0 0 15px #b100ff;
    line-height:1.1;
}

p{
    color:#eee;
    font-size:18px;
    line-height:1.6;
    margin-bottom:30px;
}

.btn{
    display:inline-block;
    text-decoration:none;
    color:white;
    background:linear-gradient(45deg,#8a00ff,#d400ff);
    padding:16px 35px;
    border-radius:50px;
    font-weight:bold;
    font-size:20px;
    transition:0.3s;
    box-shadow:0 0 25px #b900ff;
    animation: glow 1.5s ease-in-out infinite;
}

.btn:hover{
    transform:scale(0.95);
    box-shadow:0 0 45px #d400ff;
}

@media(max-width:480px){

    .container{
        padding:20px;
    }

    .logo{
        max-width:300px;
    }

    h1{
        font-size:32px;
    }

    p{
        font-size:17px;
    }

    .btn{
        font-size:20px;
        padding:16px;
    }
}
@keyframes glow {
    0%{
        opacity:1;
        box-shadow:0 0 15px #b900ff;
    }

    50%{
        opacity:0.3;
        box-shadow:0 0 60px #ff00ff;
    }

    100%{
        opacity:1;
        box-shadow:0 0 15px #b900ff;
    }
    /* ===== MOVING NEON BORDER ===== */
    
.neon-border {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    isolation: isolate;
}

/* Moving light */
.neon-border::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;

    border-radius: 25px;

    background: conic-gradient(
        #ff00ff,
        #7b00ff,
        #008cff,
        #ffffff,
        #ff00ff
    );

    animation: neonSpin 2.5s linear infinite;

    z-index: -2;
}

/* Black center - leaves only the edge visible */
.neon-border::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;

    background: inherit;
    border-radius: 19px;

    z-index: -1;
}

@keyframes neonSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Keep your content above the light */
.neon-border > * {
    position: relative;
    z-index: 1;
}