/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto; }
body { margin: 0; color: #e8f6ff; background: #03040a; min-height: 100vh;
  /* white neon glow background layers */
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.12) 0 25%, rgba(255,255,255,0) 25%),
    radial-gradient(circle at 25% 20%, rgba(0,255,255,.08) 0 40%, rgba(0,0,0,0) 40%),
    radial-gradient(circle at 80% 60%, rgba(255,105,180,.08) 0 40%, rgba(0,0,0,0) 40%);
  background-blend-mode: screen, overlay, overlay;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* subtle window glow */
  box-shadow: inset 0 0 60px rgba(255,255,255,.04);
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 40%, transparent 40%);
  pointer-events: none;
  z-index: -1;
}

/* Layout */
main { display: grid; place-items: center; padding: 2rem 1rem; }
.image-frame {
  width: min(92vw, 1000px);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow:
    0 20px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 40px rgba(255,255,255,.25),
    inset 0 0 80px rgba(255,255,255,.12);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  position: relative;
  overflow: hidden;
}
.image-frame img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  filter: saturate(1.05);
}
/* Frosted glass glow around frame */
.image-frame::after {
  content:"";
  position: absolute; inset: -2px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 0 40px rgba(0,255,255,.25);
  pointer-events: none;
}

/* CTA & product ad (accessible, prominent coral style) */
footer { text-align: center; padding: 1.5rem 1rem 2rem; color: #cfe3f7; }
.product-ad { display: inline-block; padding: .55rem 1rem; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  margin-bottom: .75rem;
}
.product-ad h3 { font-size: .95rem; margin: 0 0 .25rem; color: #ffd6d6; text-shadow: 0 0 6px rgba(255,255,255,.6); }
.product-ad a { text-decoration: none; color: inherit; display: inline-block; }
.product-ad a p {
  display: inline-block; margin: 0;
  padding: .45rem 1rem; border-radius: 999px;
  font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #ff6a61 0%, #ff8a66 100%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 6px 16px rgba(255,105,105,.6);
  transition: transform .2s ease;
}
.product-ad a:hover p { transform: translateY(-1px); }
.product-ad a:focus-visible { outline: 3px solid #7af2ff; outline-offset: 2px; border-radius: 999px; }

/* Focus for all interactive elements for accessibility */
:focus-visible { outline: 3px solid #7af2ff; outline-offset: 2px; border-radius: 6px; }

/* Responsive tweaks (mobile-first) */
@media (min-width: 520px) {
  .image-frame { padding: 2rem; }
}
@media (min-width: 768px) {
  main { padding: 4rem 2rem; }
  .image-frame { width: min(70vw, 900px); padding: 2.5rem; border-radius: 22px; }
}
@media (min-width: 1024px) {
  .image-frame { width: min(60vw, 1100px); padding: 3rem; }
}