*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: #eaffff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.6; background: linear-gradient(135deg, rgba(0,235,255,.92) 0%, rgba(0,170,255,.92) 60%, rgba(0,235,255,.92) 100%); min-height: 100vh; -webkit-font-smoothing: antialiased; }

main { display: grid; place-items: center; padding: 2rem 1rem; }

.image-frame { width: min(92vw, 860px); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: rgba(5,8,14,.65); border: 1px solid rgba(0,235,255,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0,235,255,.25); display: grid; place-items: center; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; }

footer { padding: 1.5rem 1rem 2rem; text-align: center; }

.product-ad { width: min(92vw, 780px); margin: 1.25rem auto 0; padding: 1rem; border-radius: 14px; background: rgba(8,12,18,.55); border: 1px solid rgba(0,255,255,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 6px 22px rgba(0,255,255,.22); }

.product-ad h3 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin: 0 0 .25rem; font-size: 1rem; letter-spacing:.14em; text-transform: uppercase; color: #ccfeff; }

.product-ad a { display: inline-block; padding:.5rem 1rem; border-radius:999px; color:#042a33; text-decoration: none; font-weight:600; background: linear-gradient(135deg, rgba(0,235,255,.9), rgba(0,180,255,.9)); border: 1px solid rgba(255,255,255,.5); transition: transform .2s ease, box-shadow .2s ease; }
.product-ad a:hover, .product-ad a:focus { transform: translateY(-1px); box-shadow: 0 0 14px rgba(0,235,255,.8); outline: none; }
.product-ad p { margin: 0; font-family: system-ui, sans-serif; color: #eaffff; }

footer p { margin: 0.75rem 0 0; font-family: ui-monospace, monospace; font-size: .85rem; color: #b6faff; opacity:.9; }

:focus-visible { outline: 2px solid #00e5ff; outline-offset: 2px; border-radius: 6px; }

@media (min-width: 768px) {
  main { padding: 3rem 0; }
  .image-frame { width: min(860px, 86vw); }
  .product-ad { display: inline-block; text-align: center; }
}