/* 100% visual match approach:
   Use the provided design slices as images, and overlay real clickable CTAs/links.
*/

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.slice {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slice img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- CTA overlays (DESKTOP default) ---------- */
.btn {
  position: absolute;
  display: block;
  line-height: 0;
}

.btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* HERO CTAs (percent-based so it stays aligned on any desktop width) */
.hero .btn.play{
  left: 6.2%;
  top: 51.5%;
  width: 16.0%;
}

.hero .btn.learn{
  left: 20.3%;
  top: 51.5%;
  width: 16.0%;
}

/* View More is shown on mobile in your design */
.games .btn.viewmore { display: none; }

/* REGISTER CTA (centered on the grey box) */
.register .btn.reg{
  left: 50%;
  top: 15%;
  width: 20%;
  transform: translateX(-50%);
}

/* ---------- Footer clickable regions ---------- */
/* We create invisible anchors over the footer slice.
   If you want pixel-perfect, tell me the exact footer link positions and I’ll refine.
*/
.footer .footer-link {
  position: absolute;
  display: block;
  background: rgba(255,0,0,0); /* invisible */
}

/* Desktop footer slice (approx) */
.footer .footer-link.home {
  left: 520px; top: 90px; width: 90px; height: 30px;
}
.footer .footer-link.promo {
  left: 520px; top: 125px; width: 120px; height: 30px;
}
.footer .footer-link.contact {
  left: 645px; top: 155px; width: 120px; height: 30px;
}

/* ---------- Mobile layout overrides ---------- */
@media (max-width: 767px) {
  /* Mobile hero: center the two buttons under the headline */
  .hero .btn.play{
    left: 30%;
    top: 37.5%;
    width: 40%;
  }
  .hero .btn.learn{
    left: 30%;
    top: 41.5%;
    width: 40%;
  }

  /* Mobile register button centered in the grey box */
  .register .btn.reg{
    left: 50%;
    top: 38%;
    width: 63%;
    transform: translateX(-50%);
  }

  /* Mobile View More centered above bottom padding */
  .games .btn.viewmore{
    display: block;
    left: 50%;
    bottom: 4.5%;
    width: 50%;
    transform: translateX(-50%);
  }

  /* Mobile footer clickable areas (approx) */
  .footer .footer-link.home {
    left: 55%; top: 32%; width: 30%; height: 6%;
  }
  .footer .footer-link.promo {
    left: 55%; top: 40%; width: 35%; height: 6%;
  }
  .footer .footer-link.contact {
    left: 55%; top: 56%; width: 35%; height: 6%;
  }
}