*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#04080b}
body{min-height:100svh;overflow:hidden;color:#fff;font-family:Arial,Helvetica,sans-serif}
.background{position:fixed;inset:0;background:url("background.png") center center/cover no-repeat;z-index:0}
.overlay{position:fixed;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.06) 48%,rgba(0,0,0,.36))}
main{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 22px 100px;text-shadow:0 2px 18px rgba(0,0,0,.85)}
h1{margin:0;font-size:clamp(31px,4vw,62px);font-weight:300;letter-spacing:.25em;white-space:nowrap}
h1 strong{font-weight:700}
.tagline{margin:28px 0 0;font-size:clamp(14px,1.45vw,21px);letter-spacing:.30em}
.description{margin:24px auto 0;max-width:600px;color:#d5d7d7;font-size:12px;letter-spacing:.06em}
.status{margin:26px 0 0;color:#d2d5d5;font-size:10px;letter-spacing:.20em}
.status i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fff;margin-right:10px;vertical-align:1px}
.contact{margin-top:50px;display:flex;flex-direction:column;align-items:center}
.contact span{font-size:10px;letter-spacing:.30em;margin-bottom:10px}
.contact a,.contact a:visited,.contact a:active{color:#fff;text-decoration:none;font-size:14px;letter-spacing:.04em}
.contact a:hover{opacity:.72}
footer{position:fixed;z-index:3;left:0;right:0;bottom:max(20px,env(safe-area-inset-bottom));text-align:center;color:#e5e5e5;font-size:9px;letter-spacing:.22em;text-shadow:0 2px 12px #000}

/* Portrait phones */
@media(max-width:700px) and (orientation:portrait){
  .background{
    background-size:auto 100%;
    background-position:50% center;
  }
  .overlay{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.12) 55%,rgba(0,0,0,.42))}
  main{
    justify-content:center;
    padding:max(25px,env(safe-area-inset-top)) 18px max(90px,calc(env(safe-area-inset-bottom) + 70px));
    transform:translateY(-1.5vh);
  }
  h1{
    font-size:clamp(27px,8vw,39px);
    letter-spacing:.11em;
    white-space:nowrap;
  }
  .tagline{
    margin-top:23px;
    font-size:clamp(12px,3.45vw,16px);
    letter-spacing:.17em;
    line-height:1.5;
  }
  .description{
    margin-top:20px;
    max-width:320px;
    font-size:11px;
    line-height:1.55;
    letter-spacing:.035em;
  }
  .status{
    margin-top:19px;
    max-width:330px;
    font-size:8px;
    line-height:1.65;
    letter-spacing:.13em;
  }
  .contact{margin-top:42px}
  .contact span{font-size:9px;margin-bottom:9px}
  .contact a,.contact a:visited,.contact a:active{
    font-size:clamp(14px,4vw,17px);
    letter-spacing:.01em;
  }
  footer{font-size:8px;bottom:max(16px,env(safe-area-inset-bottom))}
}

/* Small phones */
@media(max-width:390px){
  h1{font-size:26px;letter-spacing:.085em}
  .tagline{font-size:11px;letter-spacing:.14em}
  .description{font-size:10px}
  .contact a,.contact a:visited,.contact a:active{font-size:13px}
}

/* Landscape phones */
@media(max-height:520px) and (orientation:landscape){
  main{padding:14px 18px 42px}
  h1{font-size:28px}
  .tagline{margin-top:13px;font-size:11px}
  .description{margin-top:12px;font-size:9px}
  .status{margin-top:12px;font-size:7px}
  .contact{margin-top:20px}
  .contact span{font-size:8px;margin-bottom:5px}
  .contact a{font-size:12px}
  footer{bottom:8px;font-size:7px}
}