*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}
body{
  min-height:100vh;
  background:linear-gradient(145deg,#07172b,#0b2c4d);
  color:#fff;
  display:flex;
  flex-direction:column;
}
.page{
  flex:1;
  display:grid;
  place-items:center;
  padding:32px 20px;
}
.card{
  width:min(760px,100%);
  text-align:center;
  padding:60px 34px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:rgba(255,255,255,.055);
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.mark{
  width:92px;height:92px;margin:0 auto 28px;
  display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  font-size:27px;font-weight:700;
}
.eyebrow{
  margin:0 0 14px;
  letter-spacing:.22em;
  font-size:12px;
  font-weight:700;
  opacity:.72;
}
h1{
  margin:0;
  font-size:clamp(42px,8vw,76px);
  line-height:1;
  letter-spacing:-.045em;
}
.tagline{
  margin:18px 0 0;
  font-size:clamp(18px,3vw,25px);
  opacity:.86;
}
.line{
  width:56px;height:2px;
  background:#fff;
  opacity:.55;
  margin:34px auto;
}
.message{
  margin:0;
  font-size:17px;
  line-height:1.7;
  opacity:.76;
}
footer{
  text-align:center;
  padding:22px;
  font-size:13px;
  opacity:.55;
}
@media(max-width:520px){
  .card{padding:45px 22px}
  .mark{width:78px;height:78px;font-size:23px}
}