:root{
  --lime:#39ff14;
}
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  padding:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#eafff0;
  background:#000;
  /* black zigzag background with lime accent for hacker vibe */
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.95) 25%, rgba(0,0,0,.65) 25%, rgba(0,0,0,.65) 50%, rgba(0,0,0,.95) 50%),
    linear-gradient(225deg, rgba(0,0,0,.95) 25%, rgba(0,0,0,.65) 25%, rgba(0,0,0,.65) 50%, rgba(0,0,0,.95) 50%),
    linear-gradient(90deg, rgba(57,255,20,.08) 1px, transparent 1px);
  background-size:60px 60px,60px 60px,60px 60px;
  background-position:0 0,0 0,0 0;
}
main{ display:grid; place-items:center; padding:2rem 1rem; }
.image-frame{
  width:min(92vw,980px);
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(57,255,20,.6);
  box-shadow:0 8px 40px rgba(0,0,0,.7), inset 0 0 40px rgba(57,255,20,.15);
}
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:0; }
.image-frame::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(57,255,20,.6);
  z-index:1;
}
footer{ padding:1.2rem; text-align:center; color:#a6ffd1; }
.product-ad{ display:inline-block; padding:.6rem .9rem; border-radius:12px;
  background:rgba(0,0,0,.55); border:1px solid rgba(57,255,20,.5);
  box-shadow:0 6px 16px rgba(0,0,0,.6); }
.product-ad h3{ margin:0 0 .25rem; font-size:1rem; color:var(--lime);
  text-shadow:0 0 6px rgba(57,255,20,.8); }
.product-ad a{ text-decoration:none; color:inherit; }
.product-ad a p{ margin:0; padding:.5rem 1rem; border-radius:8px;
  background:linear-gradient(#57ff20,#2bd910); color:#001400; font-weight:700;
  display:inline-block; }
footer p{ margin:.6rem 0 0; font-size:.9rem; color:#9ffbd6; }
a:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; border-radius:6px; }

/* Accessibility helper: ensure focus phones keyboards easily reach links */
a, button{ outline:none; }

/* Mobile-first: scale slightly for larger screens */
@media (min-width:640px){
  main{ padding:3rem 2rem; }
  .image-frame{ border-radius:20px; }
  .product-ad{ padding:.8rem .95rem; }
}
@media (min-width:1024px){
  :root{ font-size:17px; }
  .product-ad h3{ font-size:1.05rem; }
}