body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0a0013;
}

/* Skyline */
.skyline {
    position: absolute;
    bottom: 0;
    width: 300%;
    height: 40%;
    background: linear-gradient(to top, #000 0%, transparent 100%),
        repeating-linear-gradient(to right, #4b0082 0px, #4b0082 20px, #2d004d 20px, #2d004d 40px);
    animation: skylineMove 35s linear infinite;
    opacity: 0.35;
}

@keyframes skylineMove {
    from { transform: translateX(0); }
    to { transform: translateX(-33%); }
}

/* Fog */
.fog {
    position: absolute;
    bottom: 0;
    width: 300%;
    height: 60%;
    background: radial-gradient(circle at 50% 80%, #b300ff20, transparent 70%);
    animation: fogMove 18s ease-in-out infinite alternate;
    opacity: 0.35;
    filter: blur(40px);
}

@keyframes fogMove {
    from { transform: translateX(0); }
    to { transform: translateX(-20%); }
}

/* Fade-in */
.fade-in {
    animation: fadeIn 1.4s ease forwards;
    opacity: 0;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Logo */
.logo {
    width: 260px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 25px #b300ff80);
}

/* Neon Title */
.neon {
    font-size: 3.2rem;
    letter-spacing: 3px;
    text-shadow:
        0 0 10px #b300ff,
        0 0 20px #b300ff,
        0 0 40px #b300ff;
}

/* Subtitle */
.subtitle {
    font-size: 1.3rem;
    opacity: 0.85;
    margin-top: 10px;
}

/* Buttons */
.buttons {
    margin-top: 35px;
    display: flex;
    gap: 20px;
}

.neon-btn {
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1rem;
    color: white;
    border: 1px solid #b300ff80;
    background: #b300ff10;
    transition: 0.25s;
    box-shadow: 0 0 10px #b300ff40;
}

.neon-btn:hover {
    background: #b300ff30;
    transform: translateY(-4px);
    box-shadow: 0 0 20px #b300ff80;
}