*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%} 
:root{
  --bg: #051019;
  --glass: rgba(7,18,28,0.6);
  --text: #e6feff;
  --muted: #baf6ff;
  --accent: #00f7ff;
  --cta: #00e6ff;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}
html{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial}
body{
  color:var(--text);
  background:#04101a;
  background-image: radial-gradient(circle, rgba(0,255,255,.85) 1px, transparent 1px);
  background-size: 20px 20px;
  min-height:100%;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
main{min-height:70vh; display:grid; place-items:center; padding:1.25rem}
.image-frame{
  width: min(760px, 92vw);
  aspect-ratio:16/9;
  border-radius:22px;
  background: rgba(5,20,35,0.62);
  border:1px solid rgba(0,255,255,.28);
  display:grid; place-items:center;
  padding:1rem;
  backdrop-filter: blur(6px) saturate(1.15);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(0,255,255,.12);
}
.image-frame img{width:100%; height:auto; border-radius:16px; display:block}
footer{width:100%; display:grid; place-items:center; padding:1.25rem 0 2rem; background: rgba(3,8,16,.6); }
.product-ad{
  text-align:center;
  background: rgba(7,18,28,.6);
  border:1px solid rgba(0,255,255,.28);
  border-radius:14px;
  padding:14px 16px;
  max-width:720px;
  width:90%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 28px rgba(0,0,0,.25);
}
.product-ad h3{ margin:0 0 6px; font-size:1.05rem; color:#aaf6ff; text-shadow:0 0 8px rgba(0,255,255,.6)}
.product-ad a{ display:inline-block; padding:.6rem 1rem; border-radius:999px; text-decoration:none; color:#eaffff;
  background: rgba(0,255,255,.08); border:1px solid rgba(0,255,255,.65);
  transition: transform .15s ease, background .2s ease}
.product-ad a:hover{ transform: translateY(-1px); background: rgba(0,255,255,.16) }
.product-ad p{ margin:0; color:#d9fbff}
p{margin:0}
a:focus-visible, button:focus-visible{ outline:0; box-shadow: 0 0 0 3px rgba(0,255,255,.75), 0 0 0 6px rgba(0,0,0,.25); border-radius:6px}
:focus-visible{ outline: none; }
@media (min-width:600px){
  :root{ --dot-size:22px}
  .image-frame{ padding:1.5rem }
}
@media (min-width:900px){
  main{ padding:2.5rem }
  .image-frame{ border-radius:28px }
}