:root{
  --bg:#050816;

  --blue:#1D7CFF;
  --cyan:#2FC8FF;
  --purple:#6A3CFF;
  --green:#35D06F;
  --yellow:#F5D547;

  --text:#FFFFFF;
  --text-soft:#B7C2D0;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
}

body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  overflow:hidden;
  color:var(--text);
  position:relative;
}

/* Glow central */

.bg-glow{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.bg-glow::before{
  content:'';
  width:900px;
  height:900px;

  background:
  radial-gradient(
    circle,
    rgba(29,124,255,.18) 0%,
    rgba(106,60,255,.12) 35%,
    rgba(0,0,0,0) 70%
  );

  filter:blur(80px);
}

/* Hero */

.hero{
  position:relative;
  z-index:10;

  width:100%;
  height:100vh;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  padding:20px;
}

.logo{
  width:520px;
  margin-bottom:24px;

  filter:
    drop-shadow(0 0 30px rgba(29,124,255,.25))
    drop-shadow(0 0 60px rgba(53,208,111,.15));
}

h1{
  font-size:5rem;
  font-weight:700;
  letter-spacing:8px;

  margin-bottom:14px;
}

h2{
  font-size:2rem;
  font-weight:500;

  background:
  linear-gradient(
    90deg,
    var(--blue),
    var(--purple),
    var(--green)
  );

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

  margin-bottom:28px;
}

.divider{
  width:180px;
  height:2px;

  margin-bottom:28px;

  background:
  linear-gradient(
    90deg,
    transparent,
    var(--blue),
    var(--green),
    transparent
  );
}

p{
  max-width:720px;

  color:var(--text-soft);

  font-size:1.2rem;
  line-height:1.9;
}

/* Ondas */

.wave{
  position:absolute;
  bottom:-120px;

  width:50%;
  height:400px;

  opacity:.35;

  filter:blur(.5px);
}

.wave-left{
  left:-100px;

  background:
  radial-gradient(
    ellipse at center,
    rgba(106,60,255,.6),
    transparent 70%
  );

  clip-path:
  polygon(
    0% 100%,
    10% 75%,
    20% 82%,
    30% 55%,
    40% 65%,
    50% 40%,
    60% 55%,
    70% 35%,
    80% 50%,
    90% 25%,
    100% 100%
  );
}

.wave-right{
  right:-100px;

  background:
  radial-gradient(
    ellipse at center,
    rgba(53,208,111,.7),
    transparent 70%
  );

  clip-path:
  polygon(
    0% 100%,
    10% 30%,
    20% 45%,
    30% 20%,
    40% 35%,
    50% 15%,
    60% 30%,
    70% 12%,
    80% 25%,
    90% 10%,
    100% 100%
  );
}

@media(max-width:768px){

  .logo{
    width:170px;
  }

  h1{
    font-size:3rem;
    letter-spacing:4px;
  }

  h2{
    font-size:1.3rem;
  }

  p{
    font-size:1rem;
    padding:0 15px;
  }

}