:root {
   --text: #ffffff;
   --muted: rgba(255, 255, 255, 0.75);
   --accent: #27c9f4;
   --overlay: rgba(0, 0, 0, 0.65);

   --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

* {
   box-sizing: border-box;
}

html,
body {
   height: 100%;
}

body {
   margin: 0;
   font-family: var(--font);
   background: #000;
   color: var(--text);
}

.hero {
   position: relative;
   min-height: 100vh;
   display: grid;
   place-items: center;
   overflow: hidden;
}

.bg {
   position: absolute;
   inset: 0;
   background-image: url("./assets/bg-image.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   filter: saturate(0.9);
}

.overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg,
         rgba(0, 0, 0, 0.55),
         rgba(0, 0, 0, 0.7));
}

.content {
   position: relative;
   text-align: center;
   padding: 24px;
   max-width: 900px;
}

.logo {
   width: 220px;
   max-width: 80%;
   height: auto;
   margin-bottom: 26px;
}

.coming {
   margin: 0 0 14px;
   font-size: 13px;
   letter-spacing: 0.32em;
   font-weight: 700;
   color: var(--accent);
}

.headline {
   margin: 0 0 14px;
   font-size: clamp(28px, 4vw, 54px);
   font-weight: 800;
   line-height: 1.1;
}

.subtext {
   margin: 0 auto 30px;
   max-width: 60ch;
   font-size: 15px;
   line-height: 1.6;
   color: var(--muted);
}

.copyright {
   margin: 0;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 480px) {
   .logo {
      width: 180px;
   }
}