@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:'Montserrat',Arial,sans-serif;
  color:#20252b;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.98) 0%, rgba(250,251,252,.92) 35%, rgba(230,232,235,.72) 72%, rgba(198,202,207,.86) 100%),
    linear-gradient(180deg,#fff 0%,#f4f5f6 48%,#c9ccd1 100%);
  overflow:hidden;
}

.login{
  position:fixed;
  top:34px;
  right:54px;
  height:54px;
  padding:0 26px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid rgba(32,37,43,.72);
  border-radius:8px;
  text-decoration:none;
  color:#20252b;
  font-size:18px;
  font-weight:600;
  letter-spacing:.16em;
  transition:all .22s ease;
  animation:fadeIn .7s ease .35s both;
}

.login:hover{
  background:#20252b;
  color:#fff;
}

.login span{
  font-size:25px;
  line-height:1;
  letter-spacing:0;
  transform:translateY(-1px);
}

.splash{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  text-align:center;
}

.hero{
  transform:translateY(28px);
  animation:heroIn .8s cubic-bezier(.2,.8,.2,1) both;
}

h1{
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:34px;
  white-space:nowrap;
  font-size:64px;
  line-height:1;
  color:#20252b;
  text-shadow:0 16px 38px rgba(0,0,0,.13);
}

h1 span{
  font-weight:300;
  letter-spacing:.30em;
}

h1 strong{
  font-weight:800;
  letter-spacing:.12em;
}

.line{
  width:170px;
  height:1px;
  margin:42px auto 30px;
  background:rgba(32,37,43,.45);
}

p{
  margin:10px 0 0;
  font-size:21px;
  font-weight:500;
  letter-spacing:.01em;
  color:#373d44;
}

p.small{
  font-size:18px;
}

@keyframes heroIn{
  from{opacity:0;transform:translateY(48px);filter:blur(6px)}
  to{opacity:1;transform:translateY(28px);filter:blur(0)}
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:900px){
  h1{
    flex-direction:column;
    gap:18px;
    font-size:54px;
  }
  h1 span{
    font-size:34px;
    letter-spacing:.22em;
  }
}

@media(max-width:620px){
  .login{
    top:22px;
    right:22px;
    height:46px;
    padding:0 18px;
    font-size:13px;
  }
  h1{
    font-size:44px;
  }
  h1 span{
    font-size:24px;
    letter-spacing:.18em;
  }
  p{font-size:15px}
  p.small{font-size:13px}
}