:root {
  --bg: #000;
  --fg: #fff;
  --logo-min: 140px;
  --logo-max: 520px;
  --logo-vw: 22vw;
  --golden: 75vh;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.stage { position: relative; width: 100vw; height: 100vh; }
.content { position: relative; width: 100%; height: 100%; }

.logo-wrap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
}
.logo {
  width: clamp(var(--logo-min), var(--logo-vw), var(--logo-max));
  height: auto;
  display: block;
}

.cta-wrap {
  position: absolute; left: 50%; top: var(--golden); transform: translate(-50%, -50%);
  display: grid; place-items: center; gap: 12px;
}
.cta {
  background: var(--fg); color: #000;
  padding: 14px 24px; border-radius: 999px; text-decoration: none;
  font-weight: 600; letter-spacing: .02em; font-size: clamp(14px, 1.2vw, 18px);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.cta:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.cta:active { transform: translateY(0) scale(.99); }

.footer {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-size: 14px; opacity: .9;
}
.footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.25); }
.footer a:hover { border-bottom-color: rgba(255,255,255,.6); }