* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff6e8;
  font-family: Arial, Helvetica, sans-serif;
  color: #082f4d;
}

.site {
  width: 100%;
  min-height: 100vh;
}

.mockup-stage {
  width: min(100%, 1080px);
  margin: 0 auto;
  position: relative;
  background: white;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(8, 47, 77, 0.14);
}

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

.hotspot {
  position: absolute;
  z-index: 20;
  display: block;
  border-radius: 12px;
  cursor: pointer;
}

/* Debug mode — remove comment marks if you ever need to see the clickable zones.
.hotspot {
  outline: 2px solid rgba(255, 0, 0, .55);
  background: rgba(255, 0, 0, .10);
}
*/

/* These click zones are intentionally oversized so the buttons are easy to tap. */
.nav-home { left: 28.5%; top: 2.0%; width: 8%; height: 3.0%; }
.nav-how { left: 37.5%; top: 2.0%; width: 14%; height: 3.0%; }
.nav-about { left: 52.8%; top: 2.0%; width: 9%; height: 3.0%; }
.nav-survey { left: 63.2%; top: 2.0%; width: 9%; height: 3.0%; }
.nav-contact { left: 73.8%; top: 2.0%; width: 10%; height: 3.0%; }

.waitlist-header { left: 82.5%; top: 1.1%; width: 16.8%; height: 4.4%; }
.waitlist-hero { left: 3.0%; top: 35.3%; width: 23.8%; height: 4.35%; }
.survey-hero { left: 26.1%; top: 35.3%; width: 24.2%; height: 4.35%; }

.waitlist-card { left: 3.8%; top: 77.7%; width: 22%; height: 4.1%; }
.survey-card { left: 38.0%; top: 78.2%; width: 22.5%; height: 4.0%; }
.footer-email { left: 78%; top: 93.5%; width: 20%; height: 4.2%; }

.anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
}

.how-anchor { top: 53.5%; }
.about-anchor { top: 75%; }

.working-buttons {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 18px;
  background: #ffffff;
  display: flex;
  gap: 14px;
  justify-content: center;
  border-top: 4px solid #fff6e8;
}

.work-btn {
  min-width: 210px;
  padding: 16px 20px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
}

.work-btn.teal {
  background: #008b98;
}

.work-btn.orange {
  background: #f05b36;
}

.real-waitlist {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 38px 18px 46px;
  background: #e8f7f8;
  text-align: center;
  border-top: 4px solid white;
}

.real-waitlist h2 {
  margin: 0 0 8px;
  font-size: 32px;
  color: #082f4d;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.real-waitlist p {
  margin: 0 auto 22px;
  max-width: 620px;
  line-height: 1.5;
  font-weight: 700;
}

.real-waitlist form {
  width: min(520px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.real-waitlist input {
  height: 48px;
  border: 1px solid rgba(8,47,77,.18);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 15px;
}

.real-waitlist button {
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: #008b98;
  color: white;
  text-transform: uppercase;
  font-weight: 900;
  cursor: pointer;
}

.hidden {
  display: none;
}

@media (max-width: 760px) {
  .mockup-stage {
    width: 100%;
    box-shadow: none;
  }

  .working-buttons {
    width: 100%;
    display: grid;
  }

  .work-btn {
    width: 100%;
  }

  .real-waitlist {
    width: 100%;
  }
}