/* remove a quebra de linha mobile */
@media only screen and (max-width:728px){
	br {
		display: none;
	}
}

/* busca de domínio */
.search_domain_form {
    position: relative;
    width:800px;
}

.search_domain_form .domain_input{
    border-radius:30px;
    padding:15px 75px;
    font-size:14pt;
    display:block;
    border:none;
}

.search_domain_form #globe{
    position: absolute;
    width:46px;
    top:10px;
    left:10px
}

.search_domain_form button.input_submit{
    position:absolute;
    right:5px;
    top:5px;
    background:#2b33bb;
    border-radius:30px;
    padding:13px 20px;
    color:#fff;
    text-transform:none;
    border:none;
}

@media only screen and (max-width:728px){
	.search_domain_form{
		max-width: 100%;
	}
	.search_domain_form .domain_input{
		padding:15px 20px 15px 75px;
	}
	.search_domain_form button.input_submit{
		width: 100%;
		right: unset;
		top: 10px;
		position:relative;
	}
}

/* fundo */
:root {
            --color-bg1: rgba(108, 0, 162, 0.1); /* roxo suave */
            --color-bg2: rgba(0, 17, 82, 0.05); /* azul suave */
            --color1: rgba(18, 113, 255, 0.4); /* azul mais suave */
            --color2: rgba(221, 74, 255, 0.4); /* rosa suave */
            --color3: rgba(108, 0, 162, 0.2); /* roxo suave */
            --color4: rgba(100, 220, 255, 0.4); /* ciano suave */
            --color5: rgba(18, 113, 255, 0.3); /* azul mais suave */
            --blending: hard-light;
            --circle-size: 120%;
    }

    .gradient-bg {
      position: absolute;
      width: 100vw;
      height:100vh;
			z-index:-1;
			overflow: hidden;
			top:0px;
			left:0px;
    }
    
    .gradient-bg2 {
    background: linear-gradient(0deg, rgba(246, 246, 246, 1) 0%, rgba(246, 246, 246, 0) 100%);
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0px;
    left:0px;
    z-index:1;
}

    .gradients-container {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      filter: blur(20px);
      z-index: 1;
    }

    .g1, .g2, .g3, .g4, .g5 {
      position: absolute;
      background: radial-gradient(circle at center, var(--color1) 0%, rgba(18, 113, 255, 0) 50%) no-repeat;
      mix-blend-mode: var(--blending);
      width: var(--circle-size);
      height: var(--circle-size);
      animation: moveVertical 30s ease infinite;
      left: 30%;
    }

    .g2 {
      background: radial-gradient(circle at center, var(--color2) 0%, rgba(221, 74, 255, 0) 50%) no-repeat;
      animation: moveInCircle 20s reverse infinite;
      left: 40%;
    }

    .g3 {
      background: radial-gradient(circle at center, var(--color3) 0%, rgba(100, 220, 255, 0) 50%) no-repeat;
      animation: moveInCircle 40s linear infinite;
      left: 30%;
    }

    .g4 {
      background: radial-gradient(circle at center, var(--color4) 0%, rgba(200, 50, 50, 0) 50%) no-repeat;
      width: calc(var(--circle-size) * 1.5);
      height: calc(var(--circle-size) * 1.5);
      animation: moveHorizontal 40s ease infinite;
      left: 50%;
    }

    .g5 {
      background: radial-gradient(circle at center, var(--color5) 0%, rgba(180, 180, 50, 0) 50%) no-repeat;
      width: calc(var(--circle-size) * 2);
      height: calc(var(--circle-size) * 2);
      animation: moveInCircle 25s ease infinite;
      left: 30%;
    }

    .interactive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse 600px 500px at center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 80%);
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
  filter: blur(40px);
  z-index: 2;

    }

    .text-container {
      z-index: 3;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 96px;
      color: white;
      opacity: 0.8;
      user-select: none;
      text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
    }

    @keyframes moveInCircle {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(180deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes moveVertical {
      0% { transform: translateY(-50%); }
      50% { transform: translateY(50%); }
      100% { transform: translateY(-50%); }
    }

    @keyframes moveHorizontal {
      0% { transform: translateX(-80%) translateY(-10%); }
      50% { transform: translateX(80%) translateY(10%); }
      100% { transform: translateX(-80%) translateY(-10%); }
    }