/* Reset and base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #e8eaff;
  background-color: #0b0e1a;
  /* red grid paper background */
  background-image:
    linear-gradient(rgba(255,0,0,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,0,.25) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* Layout */
main { display: grid; place-items: start center; padding: 6vh 1.25rem 4rem; min-height: 60vh; }
.image-frame { width: min(92vw, 720px); margin: 0 auto; padding: 1.25rem; border-radius: 16px; 
  background: rgba(15, 20, 40, 0.65); backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.15); box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.image-frame img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); }

/* Frosted glass feel for footer/ad */
footer { padding: 2rem 1rem 3rem; display: grid; justify-items: center; gap: .75rem; }
.product-ad { width: min(92vw, 540px); padding: 1rem 1.25rem; border-radius: 14px; text-align: left;
  background: rgba(14, 18, 40, 0.66); backdrop-filter: blur(6px); 
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 24px rgba(0,0,0,.4);
  color: #e8eaff;
}
.product-ad h3 { font-size: 0.95rem; margin: 0 0 .5rem; color: #c7d2fe; text-shadow: 0 0 6px rgba(99,102,241,.75); letter-spacing: .2px; }

/* CTA styling (button-like link) */
.product-ad a { text-decoration: none; }
.product-ad a p {
  display: inline-block;
  padding: .62rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  margin: 0;
}
.product-ad a:hover p { filter: brightness(1.05); transform: translateY(-1px); transition: transform .15s ease; }
.product-ad a:focus-visible p { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* Footer text */
footer p { color: #cbd5e1; text-align: center; margin: .25rem 0 0; opacity: .9; }

/* Small tweaks for responsiveness */
@media (min-width: 600px) {
  .image-frame { padding: 1.75rem; border-radius: 20px; }
  .product-ad { padding: 1.5rem; }
}