/* =========================
   HERO SECTION
========================= */

.hero{
  min-height:100vh;

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

  text-align:center;

  padding:120px 20px 80px;
}

/* =========================
   ANIMATION
========================= */

@keyframes fadeUp {
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   MASCOT
========================= */

.mascot{
  width:320px;
  max-width:80%;

  margin-bottom:20px;

  opacity:0;
  animation:fadeUp 1.2s ease forwards;
}

/* =========================
   LOGO
========================= */

.logo-tube{
  font-size:4.2rem;
  letter-spacing:0.28rem;
  font-weight:600;

  margin-bottom:12px;

  color:transparent;
  -webkit-text-stroke:2px #01F1FE;

  text-shadow:
    0 0 4px rgba(1,241,254,0.35),
    0 0 10px rgba(1,241,254,0.15);

  opacity:0;
  animation:fadeUp 1.4s ease forwards;
  animation-delay:0.4s;
}

/* TM */

.logo-tube .tm{
  font-size:1rem;
  position:relative;
  top:-2rem;
  margin-left:-0.6rem;

  -webkit-text-stroke:1px #01F1FE;
}

/* =========================
   TAGLINE
========================= */

.tagline{
  font-size:1.1rem;
  color:#5a6f80;

  margin-top:10px;
  margin-bottom:20px;

  opacity:0;
  animation:fadeUp 1.4s ease forwards;
  animation-delay:0.8s;
}

/* =========================
   BETA TEXT
========================= */

.beta-text{
  font-size:0.95rem;
  letter-spacing:0.12rem;
  color:#6f8496;

  opacity:0;
  animation:fadeUp 1.4s ease forwards;
  animation-delay:1.2s;
}

/* =========================
   CTA
========================= */

.hero-cta{
  margin-top:22px;
}

.cta-button{
  padding:12px 24px;

  border:1px solid rgba(1,241,254,0.15);
  border-radius:12px;

  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.08rem;

  background:rgba(1,241,254,0.08);
  color:#6f8496;

  cursor:pointer;

  transition:all 0.2s ease;

  opacity:0;
  animation:fadeUp 1.4s ease forwards;
  animation-delay:1.6s;
}

.cta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(1,241,254,0.25);
}

/* disabled */

.cta-button.disabled{
  pointer-events:none;
  cursor:default;
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

  .hero{
    padding:100px 16px 60px;
  }

  .mascot{
    width:180px;
    margin-bottom:16px;
  }

  .logo-tube{
    font-size:2.4rem;
    letter-spacing:0.18rem;

    -webkit-text-stroke:1px #01F1FE;

    text-shadow:
      0 0 2px rgba(1,241,254,0.25);
  }

  .logo-tube .tm{
    font-size:0.6rem;
    top:-1rem;
    margin-left:-0.2rem;

    -webkit-text-stroke:0;
  }

  .tagline{
    font-size:0.95rem;
  }

  .beta-text{
    font-size:0.8rem;
    margin-top:8px;
  }

  .cta-button{
    font-size:0.85rem;
    padding:10px 18px;
  }

}