:root{
  --coral:#ff7f50;
  --maroon:#800020;
  --bg1:var(--coral);
  --bg2:#b03060;
  --bg3:#160b0b;
  --glass: rgba(255,255,255,0.08);
  --ring: rgba(255,255,255,.28);
  --text:#f6f0f0;
}
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  color:var(--text);
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 60%, var(--bg3) 100%);
  min-height:100vh;
  background-size:200% 200%;
  animation: gradientShift 20s ease infinite;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@keyframes gradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
main{ padding:1rem; display:grid; place-items:center; min-height:calc(100vh - 6rem); }

.image-frame{
  width:min(96vw,860px);
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  display:block;
}
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

footer{
  padding:1.25rem;
  display:grid;
  place-items:center;
  color:#f3e9e9;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.product-ad{
  width:min(92%,720px);
  padding:.9rem 1rem;
  margin:.75rem 0;
  border-radius:12px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.product-ad h3{ margin:0 0 .25rem; font-size:1.05rem; color:#ffd8d8; }
.product-ad p{ margin:0; color:#ffe8e8; font-weight:500; }

.product-ad a{
  display:inline-block;
  margin-top:.5rem;
  padding:.6rem 1rem;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  background: linear-gradient(135deg, #ff6b6b 0%, #b01a2b 100%);
  border:1px solid rgba(255,255,255,.45);
  transition: transform .15s ease, box-shadow .2s ease;
}
.product-ad a:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.45); }
.product-ad a:focus-visible{ outline:2px solid #ffd166; outline-offset:2px; }

@media (min-width:600px){
  main{ padding:2rem; }
  .image-frame{ border-radius:20px; }
  .product-ad{ padding:1.2rem 1.4rem; }
}
@media (min-width:900px){
  main{ align-items:flex-start; padding-top:3rem; }
  .image-frame{ width:720px; }
}