* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #000; color: #fff; font-family: system-ui, -apple-system, sans-serif; }

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  transform: translateY(-6%);
}

.logo {
  display: block;
  width: clamp(300px, 70vw, 520px);
  height: auto;
  margin: 0 auto;
}

.tagline {
  margin-top: 10px;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
}

.cta {
  margin-top: 12px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

/* Mobile only */
@media (max-width: 599px) {
  .logo { width: clamp(320px, 85vw, 580px); } /* boosted logo for phone */
}

/* Tablet (iPad) */
@media (min-width: 600px) and (max-width: 1024px) {
  .wrapper { transform: translateY(-5%); }
  .logo { width: clamp(400px, 76vw, 640px); }
}

/* Desktop */
@media (min-width: 1025px) {
  .wrapper { transform: none; }
  .logo { width: clamp(380px, 45vw, 580px); }
}