/* Minimal reset and vars */
:root{
  --bg: #0a0a1a;
  --violet: #7c3aed;
  --blue: #3b82f6;
  --blue-deep: #1e3a8a;
  --glass: rgba(255,255,255,.08);
  --card: rgba(15,23,42,.65);
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  padding:0;
  font-family: ui-sans-serif, system-ui, -apple-system;
  color:#e8f0ff;
  background: var(--bg);
  /* violet polka dots background */
  background-image:
    radial-gradient(circle at 10px 10px, rgba(124,58,237,.55) 2px, transparent 2px),
    radial-gradient(circle at 30px 12px, rgba(0,168,255,.25) 2px, transparent 2px);
  background-size: 40px 40px;
  background-attachment: fixed;
  line-height:1.5;
}

/* Layout: mobile-first hero with frosted glass footer card */
main{
  display:grid;
  place-items:center;
  padding:2rem 1rem;
  min-height:60vh;
}
.image-frame{
  width:100%;
  max-width:1200px;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  padding:1rem;
  border-radius:18px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: saturate(1.2) blur(2px);
  -webkit-backdrop-filter: saturate(1.2) blur(2px);
  overflow:hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.image-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05);
  border-radius:14px;
}
footer{
  padding:1.75rem 1rem 2rem;
  background: rgba(3,6,20,.65);
  border-top:1px solid rgba(100,180,255,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.product-ad{
  max-width:720px;
  margin:0 auto;
  padding:1rem;
  border-radius:14px;
  text-align:center;
  background: rgba(9,14,40,.65);
  border:1px solid rgba(120,180,255,.5);
}
.product-ad h3{
  margin:0 0 .4rem;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#bfe3ff;
}
.product-ad a{ text-decoration:none; }
.product-ad a p{
  display:inline-block;
  margin:0;
  padding:.6rem 1.1rem;
  border-radius:999px;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  color:#fff;
  font-weight:700;
  /* subtle neon glow */
  text-shadow: 0 0 6px rgba(76, 169, 255, .65);
  box-shadow: 0 6px 14px rgba(37,99,235,.45);
}
p:first-child{ margin:0; }

/* Focus accessibility for keyboard users */
a:focus-visible, button:focus-visible{
  outline:3px solid #a5b4fc;
  outline-offset:2px;
  border-radius:8px;
}
:focus{ outline:none; }

/* Slight cyberpunk polish on larger screens */
@media (min-width: 640px){
  .image-frame{ border-radius:22px; }
}
@media (min-width: 900px){
  main{ padding:3rem 2rem; }
  .product-ad{ padding:1.25rem; }
}