/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto; color: #e8e8e8;
  background: linear-gradient(135deg, #fff1a8 0%, #ffd166 40%, #f59f00 100%);
  min-height: 100vh; display: flex; flex-direction: column; }

/* Layout: mobile-first, centered hero with frosted glass card */
main { flex: 1 0 auto; display: grid; place-items: center; padding: 2rem 1rem; }

/* Frosted glass image frame (hero) */
.image-frame { width: min(92vw, 720px);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  padding: 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.image-frame img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Footer / Product ad (prominent CTA) */
footer { padding: 1.75rem 1rem 2rem; }
.product-ad { width: min(92vw, 700px); margin: 0 auto 0.75rem;
  padding: .75rem 1rem; text-align: center;
  background: rgba(0, 0, 0, 0.34);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.product-ad h3 { margin: 0 0 .5rem; font-size: 1.05rem;
  color: #ffd400; text-shadow: 0 0 8px rgba(255, 214, 0, 0.8); }
.product-ad p { margin: 0; }
.product-ad a { text-decoration: none; display: inline-block; margin-top: .5rem; }
.product-ad a p { padding: .6rem 1rem; border-radius: 6px;
  background: #111; color: #ffd400;
  border: 1px solid rgba(255, 214, 0, 0.75);
  display: inline-block; box-shadow: inset 0 0 8px rgba(0,0,0,0.5); }

/* Focus & accessibility for interactive elements */
.product-ad a:focus-visible {
  outline: 2px solid #ffd400; outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.25);
}
button, [role="button"], a { outline: none; }
a { color: inherit; }

/* Global text contrast for readability on yellow background */
:focus { outline: none; }
@media (min-width: 768px) {
  main { padding: 3rem 2rem; }
  footer { padding: 2rem 1rem; }
}