/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── Page shell: full-screen black canvas ───────────────── */
html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}

/* ─── Mobile viewport container ─────────────────────────── */
/*
   Max width is capped at 430px (typical large-phone width).
   On desktops the remaining space stays pure black on both sides.
*/
.mobile-wrap {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  /* height grows with the background image — no cropping ever */
}

/* ─── Background scene ───────────────────────────────────── */
.scene {
  position: relative;
  width: 100%;
}

/* Background rendered as a real <img> so it is never cropped.
   It always fills the full width and scales proportionally. */
.bg-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ─── Button groups ──────────────────────────────────────── */
.btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  position: absolute;
  top: 54%;                  /* moved up slightly */
  left: 50%;
  transform: translateX(-50%);

  width: 52%;                /* main buttons — smaller */

  animation: fadeIn 0.35s ease;
}

/* Contact sub-buttons are noticeably smaller */
#contactButtons {
  width: 42%;
  gap: 10px;
}

.btn-group a {
  display: block;
  width: 100%;
  line-height: 0;
}

.btn-group img {
  width: 100%;
  display: block;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn-group img:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}

.btn-group img:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}

#btnBack{
  width:120px;
}

/* ─── Utility ────────────────────────────────────────────── */
.hidden {
  display: none !important;
}

/* ─── Fade-in animation ──────────────────────────────────── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}