/* RESET */
body {
    margin: 0;
    background: radial-gradient(circle at top, #0f172a, #020617);
    color: white;
    font-family: 'Poppins', sans-serif;
}

/* NAVBAR */
nav {
    backdrop-filter: blur(10px);
}

/* LOGO CONTAINER */
.logo-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    /* 🔥 centralização perfeita */
    width: 100%;
}

/* V PRINCIPAL */
.big-v {
    font-size: 200px; /* 🔥 melhor proporção desktop */
    font-weight: 900;
    line-height: 1;

    background: linear-gradient(90deg, #EC4899, #9333EA, #6366F1);
    background-size: 250% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: gradientMove 8s linear infinite,
               glowPulse 3s ease-in-out infinite;
}

/* NOME (CENTRALIZADO PERFEITO) */
.name {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%); /* 🔥 centralização perfeita */

    font-size: 26px;
    font-weight: 600;
    letter-spacing: 4px;

    white-space: nowrap;

    animation: fadeMove 5s ease-in-out infinite alternate;
}

/* TEXTO "EM CONSTRUÇÃO" */
.construcao {
    font-size: 14px;

    background: linear-gradient(90deg, #EC4899, #9333EA, #6366F1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ANIMAÇÕES */
@keyframes gradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

@keyframes glowPulse {
    0%, 100% { filter: drop-shadow(0 0 8px #9333EA); }
    50% { filter: drop-shadow(0 0 18px #EC4899); }
}

@keyframes fadeMove {
    0% { opacity: 0; transform: translate(-50%, -40%); }
    50% { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -60%); }
}

/* 🔥 RESPONSIVO MOBILE (MUITO IMPORTANTE) */
@media (max-width: 768px) {

    .big-v {
        font-size: 90px; /* 🔥 reduz forte no celular */
    }

    .name {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .logo-container {
        margin-bottom: 15px;
    }
}

/* 🔥 TELAS MUITO PEQUENAS */
@media (max-width: 480px) {

    .big-v {
        font-size: 70px;
    }

    .name {
        font-size: 14px;
    }
}

/* COR ROXA */
.roxo {
    color: #9333EA;
}