/* ===========================================================================
   BadAssPT.com - pixel-exact mockup render.
   The page is the sliced mockup artwork; transparent hotspots provide the
   "links that go nowhere" over the nav items and the two hero CTA buttons.
   =========================================================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #0a0810;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Full-bleed render: the artwork spans the full viewport width at any screen size. */
.mock {
  position: relative;
  width: 100%;
  margin: 0;
}

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

/* Transparent click targets laid over the artwork. Positioned in % so they
   track the image as it scales on smaller screens. */
.hot {
  position: absolute;
  display: block;
  cursor: pointer;
  /* outline: 1px solid rgba(0,255,0,.6);  <- uncomment to visualize hotspots */
}
.hot:focus-visible { outline: 2px solid #fbbf24; }