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

body {
  height: 100vh;
  overflow: hidden;
  color: #fff;
}

#bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* leve blur geral (ok) */
.overlay {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(3px);
}

/* container continua full screen */
.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 👇 NOVO: conteúdo isolado */
.content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;

  animation: fadeIn 1.2s ease;
}

/* 👇 CONTRASTE LOCAL (agora correto) */
.content::before {
  content: "";
  position: absolute;
  inset: -100px;
  z-index: -1;

  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.65),
    rgba(0, 0, 0, 0.425) 40%,
    transparent 70%
  );

  filter: blur(60px);
}

/* avatar */
.avatar {
  cursor: pointer;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.2);
}




/* Modal */
.img-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}

.img-modal.active {
  opacity: 1;
  pointer-events: all;
}

/* Imagem */
.img-modal img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
}

/* Botão X */
.close-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;

  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}



/* texto */
h1 {
  font-size: 24px;
  font-weight: 600;
}

.desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 1px;
}

.desc span:first-child {
  font-size: 13px;
  opacity: .7;
}

.desc span:last-child {
  font-size: 12px;
  opacity: .6;
}

/* sociais */
.socials {
  margin-top: 15px;
  display: flex;
  gap: 18px;
}

.socials a {
  color: #aaa; /* antes era branco */
  opacity: .8;
  transition: .25s ease;
}

.socials a svg {
  width: 22px;
  height: 22px;
}

/* efeito geral */
.socials a:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.05);
}

/* cores no hover */
.socials a.ig:hover {
  color: #E4405F;
  filter: drop-shadow(0 0 6px #E4405F);
}

.socials a.yt:hover {
  color: #FF0000;
  filter: drop-shadow(0 0 6px #FF0000);
}

.socials a.tw:hover {
  color: #1DA1F2;
  filter: drop-shadow(0 0 6px #1DA1F2);
}

.socials a.gh:hover {
  color: #fff;
  filter: drop-shadow(0 0 6px #fff);
}

.socials a.twc:hover {
  color: #9146FF;
  filter: drop-shadow(0 0 6px #9146FF);
}

/* animação */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}



/* =========================
   RESPONSIVO MOBILE
========================= */
@media (max-width: 600px) {

  body {
    overflow: hidden;
  }

  /* diminui área do glow pra não exagerar no mobile */
  .content::before {
    inset: -60px;
    filter: blur(40px);
  }

  /* avatar menor */
  .avatar {
    width: 90px;
    height: 90px;
  }

  /* título menor */
  h1 {
    font-size: 20px;
  }

  /* textos mais compactos */
  .desc span:first-child {
    font-size: 12px;
  }

  .desc span:last-child {
    font-size: 11px;
  }

  /* espaçamento geral menor */
  .content {
    gap: 8px;
    padding: 0 20px; /* evita encostar nas bordas */
  }

  /* sociais menores */
  .socials {
    gap: 14px;
    margin-top: 12px;
  }

  .socials a svg {
    width: 20px;
    height: 20px;
  }

  /* modal imagem menor */
  .img-modal img {
    width: 220px;
    height: 220px;
  }

  /* botão fechar melhor pra dedo */
  .close-btn {
    width: 45px;
    height: 45px;
    font-size: 22px;
  }
}


 /* * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { height: 100vh; overflow: hidden; color: #fff; user-select: none; } #bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; }.overlay { position: fixed; inset: 0; backdrop-filter: blur(3px); }.container { height: 100%; display: flex; align-items: center; justify-content: center; }.content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: fadeIn 1.2s ease; }.content::before { content: ""; position: absolute; inset: -100px; z-index: -1; background: radial-gradient( circle at center, rgba(0,0,0,0.65), rgba(0, 0, 0, 0.425) 40%, transparent 70% ); filter: blur(60px); }.avatar { cursor: pointer; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.2); }.img-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: 0.3s ease; } .img-modal.active { opacity: 1; pointer-events: all; }.img-modal img { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; }.close-btn { position: absolute; top: 20px; left: 20px; background: none; border: none; color: white; font-size: 24px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; } .close-btn:hover { background: rgba(255, 255, 255, 0.2); }h1 { font-size: 24px; font-weight: 600; } .desc { display: flex; flex-direction: column; align-items: center; letter-spacing: 1px; } .desc span:first-child { font-size: 13px; opacity: .7; } .desc span:last-child { font-size: 12px; opacity: .6; }.socials { margin-top: 15px; display: flex; gap: 18px; } .socials a { color: #aaa;opacity: .8; transition: .25s ease; } .socials a svg { width: 22px; height: 22px; }.socials a:hover { opacity: 1; transform: translateY(-4px) scale(1.05); }.socials a.ig:hover { color: #E4405F; filter: drop-shadow(0 0 6px #E4405F); } .socials a.yt:hover { color: #FF0000; filter: drop-shadow(0 0 6px #FF0000); } .socials a.tw:hover { color: #1DA1F2; filter: drop-shadow(0 0 6px #1DA1F2); } .socials a.gh:hover { color: #fff; filter: drop-shadow(0 0 6px #fff); } .socials a.twc:hover { color: #9146FF; filter: drop-shadow(0 0 6px #9146FF); }@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }  */