/* ---------- Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  overflow: hidden;
}

/* ---------- Page shell ---------- */
.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #f6f5f2; /* warm white fallback */
}

/* Background image layer, fills entire screen on every device */
.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Content ---------- */
/* Logo is centered on the page. Buttons are pinned near the bottom
   using their own absolute position, matching the fixed 150px / 100px
   gap from the bottom of the viewport regardless of screen height. */
.content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: auto;
  display: block;
}

/* Desktop logo: 648 x 153px, 45% relative width */
.logo-desktop {
  width: 45%;
  max-width: 648px;
  display: block;
}

.logo-mobile {
  display: none;
}

/* ---------- Icon buttons ---------- */
.links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 150px; /* desktop gap from bottom of page */
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.icon-btn:hover,
.icon-btn:focus-visible {
  transform: translateY(-2px);
  opacity: 0.85;
}

.icon-btn:focus-visible {
  outline: 2px solid rgba(90, 110, 140, 0.6);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Icon SVGs already include their own circular glass background,
   blur, and icon color, no extra styling needed here */
.icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .logo-desktop {
    display: none;
  }

  /* Mobile logo: 273 x 156px, 70% relative width */
  .logo-mobile {
    display: block;
    width: 70%;
    max-width: 273px;
  }

  .links {
    bottom: 100px; /* mobile gap from bottom of page */
  }

  .icon-btn {
    width: 60px;
    height: 60px;
  }
}