:root{
  --bg-dark:#030313;
  --muted:rgba(255,255,255,0.85);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans',sans-serif;
  background:var(--bg-dark);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  cursor:crosshair;
}

#bg{
  position:fixed;
  inset:-3%;
  width:106%;
  height:106%;
  background:url('./images/under-construction.webp') center/cover no-repeat;
  z-index:0;
  will-change:transform;
  transform-origin:center center;
  image-rendering:auto;
}

.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.45) 100%);
  pointer-events:none;
}

.overlay{
  position:fixed;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.35));
  pointer-events:none;
}

.container{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px;
  padding-bottom:64px;
  text-align:center;
}

.title{
  font-size:clamp(36px,8vw,96px);
  line-height:1;
  margin:0;
  font-weight:800;
  letter-spacing:-0.02em;
  background:linear-gradient(90deg,#7b2ff7 0%,#00dbde 50%,#00ff9d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
  padding-bottom:6px;
}

.lead{
  margin-top:18px;
  font-size:18px;
  color:var(--muted);
  font-weight:500;
}

@media (max-width:600px){
  .title{font-size:36px}
  .lead{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  #bg{transform:none !important}
}