/* Cyberpunk hacker theme with turquoise noise, frosted glass, mobile-first layout */

/* Reset and root colors */
:root{
  --bg-navy: #041021;
  --bg-navy-deep: #0b1a2b;
  --turquoise: #2ee6d8;
  --turquoise-deep: #1ab1ad;
  --fg: #eafffe;
  --card: rgba(255,255,255,.08);
  --card-border: rgba(255,255,255,.22);
  --glass: rgba(255,255,255,.08);
  --shadow: 0 8px 22px rgba(0,0,0,.45);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Light reset on margins/padding */
html, body { height: 100%; margin: 0; padding: 0; }

/* Turquoise noise texture background + navy hacker vibe */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  color: var(--fg);
  background-color: var(--bg-navy);
  line-height: 1.4;
  /* Turquoise noise texture: layered gradients for subtle speckle */
  background-image:
    radial-gradient(circle at 10% 20%, rgba(46,230,216,.28) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.25) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(3,12,26,.95), rgba(0,12,24,.95) 60%, rgba(0,0,0,.95) 100%);
  background-size: 60px 60px, 60px 60px, cover;
  background-blend-mode: screen, overlay, normal;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

/* Layout: mobile-first, center hero content */
main {
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  min-height: calc(100vh - 140px);
}

/* Frosted glass card for the hero/media frame */
.image-frame {
  width: min(92vw, 980px);
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Image inside frosted frame */
.image-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  outline: none;
}

/* Footer with prominent CTA section */
footer {
  padding: 2rem 1rem;
  text-align: center;
  background: linear-gradient(to top, rgba(4,14,32,.95), rgba(4,14,32,.75));
  border-top: 1px solid rgba(255,255,255,.15);
}

/* Featured product CTA pill */
.product-ad {
  display: inline-block;
  padding: .6rem .95rem;
  border-radius: 999px;
  background: rgba(2,10,24,.75);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: .75rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
}

.product-ad h3 {
  font-size: .95rem;
  font-weight: 600;
  margin: 0 0 .25rem;
  letter-spacing: .2px;
}

/* CTA button styling (link) */
.product-ad a {
  display: inline-block;
  text-decoration: none;
  color: #e9feff;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #0a2230, #0b3a4a);
  border: 1px solid rgba(255,255,255,.25);
}
.product-ad a:focus-visible, .product-ad a:focus {
  outline: 3px solid var(--turquoise);
  outline-offset: 2px;
}
.product-ad a:hover {
  filter: saturate(110%);
  transform: translateY(-1px);
}

/* Tiny footer text */
footer p {
  margin: .25rem 0 0;
  font-size: .9rem;
  color: #b6f0ea;
  opacity: .92;
}

/* Focus for any keyboard navigation outside of the CTA */
:focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 2px;
}

/* Responsive adjustments: larger display => more breathing room */
@media (min-width: 600px) {
  main { padding: 3rem 0; }
  .image-frame { padding: 1.25rem; }
  .product-ad { padding: .8rem 1.25rem; }
}

@media (min-width: 900px) {
  main { padding: 4rem 0; }
}