/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Theme vars */
:root {
  --lime: #baff66;
  --lime-dark: #7bdc2e;
  --bg: #03070a;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(126, 255, 150, 0.4);
  --text: #eaff8a;
  --muted: #a8f28a;
  --shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* Body: lime galaxy starscape */
html, body { height: 100%; }
body {
  min-height: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  color: var(--text);
  background-color: var(--bg);
  /* lime starfield */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,255,120,.9) 0.6px, transparent 0.6px),
    radial-gradient(circle at 3px 4px, rgba(0,255,140,.7) 0.6px, transparent 0.6px),
    radial-gradient(circle at 7px 2px, rgba(170,255,120,.9) 0.6px, transparent 0.6px),
    radial-gradient(circle at 40% 60%, rgba(255,255,255,.8) 0.8px, transparent 0.8px),
    linear-gradient(#032019, #03070a);
  background-size: 2px 2px, 3px 3px, 3px 3px, 2px 2px, cover;
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
}

/* Layout: hero & frame */
main { display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 4rem 1rem; min-height: 60vh; }
.image-frame { width: min(92vw, 860px); margin: 0 auto; padding: 1rem; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(120,255,120,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 40px rgba(0,0,0,.25); }
.image-frame img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Footer & CTA */
footer { padding: 2rem 1rem; text-align: center; color: #d7ff96; }
.product-ad { display:inline-flex; flex-direction:column; align-items:center; gap:.4rem; padding:.6rem 0.75rem; border-radius: 12px; background: rgba(0,0,0,.28); border:1px solid rgba(120,255,120,.4); margin: .5rem auto 1rem; width: max-content; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.product-ad h3 { font-size: .92rem; color:#d5ff7a; letter-spacing:.3px; text-shadow: 0 0 8px rgba(170,255,120,.6); }
.product-ad a { text-decoration:none; }
.product-ad a p { margin:0; padding:.55rem 1rem; border-radius: 8px; color:#041e0b; background: linear-gradient(#28c04a, #0a7a26); font-weight:700; }

/* Focus styles for accessibility */
a:focus-visible, button:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-radius:6px; }

/* Small screens - tweak */
@media (min-width: 720px) {
  main { padding: 6rem 2rem; }
}