body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  text-align: center;
  background: #000;
  overflow-x: hidden;
}

.bg-pattern {
  position: fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:
    linear-gradient(135deg, #001 0%, #000 100%);
  opacity: 0.8;
  z-index: -1;
}

.logo { max-width: 260px; margin: 20px auto; display:block; }
.main-logo { max-width: 330px; }
.sub-logo { max-width: 240px; opacity: .9; }

.hero h1 {
  font-size: 3.3rem;
  font-weight: 900;
  margin-top: 20px;
}

.subtitle {
  font-size: 1.3rem;
  color: #4da3ff;
  font-weight: 300;
}

.line-art {
  margin: 60px auto;
  width: 80%;
  max-width: 500px;
}

.line-svg {
  width: 100%;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 2.5s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.info {
  max-width: 650px;
  margin: 0 auto;
  font-size: 1.2rem;
  opacity: .9;
}

.contact a {
  color: #4da3ff;
  font-weight: 600;
  text-decoration: none;
}

footer {
  margin: 40px 0 20px 0;
  font-size: 0.9rem;
  opacity: .7;
}

/* fade-in */
.fade-in { opacity: 0; animation: fade 1.2s forwards; }
@keyframes fade { to { opacity: 1; } }
.delay-1 { animation-delay: .3s; }
.delay-2 { animation-delay: .6s; }
.delay-3 { animation-delay: .9s; }
.delay-4 { animation-delay: 1.2s; }
.delay-5 { animation-delay: 1.5s; }