:root{
  --bg-dark: #0b0b0f;
  --text: #f8f8f8;
  --muted: #d9d9d9;
  --red: #ff3b3b;
  --red-dark: #b30000;
  --glass: rgba(255,255,255,.16);
  --glass-border: rgba(255,255,255,.28);
  --radius: 18px;
  --shadow: 0 8px 28px rgba(0,0,0,.55);
}
*,
*::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;
  color: var(--text);
  min-height:100vh;
  background: radial-gradient(circle at 20% -10%, rgba(255,95,95,.95) 0 25%, rgba(255,95,95,.65) 40%, rgba(0,0,0,0) 60%),
              radial-gradient(circle at 85% 15%, rgba(255,0,0,.45) 0%, rgba(0,0,0,0) 60%),
              #0b0b0b;
  background-attachment: fixed;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6vh 1rem 2rem;
  flex:1 0 auto;
}
.image-frame{
  position:relative;
  width:100%;
  max-width:680px;
  aspect-ratio:16/9;
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: .5rem;
  box-shadow: inset 0 0 40px rgba(0,0,0,.4), 0 22px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.image-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow: inset 0 0 60px rgba(255,0,0,.6);
  pointer-events:none;
  opacity:.9;
  mix-blend-mode: screen;
}
.image-frame img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  filter: saturate(1.05);
  outline: 1px solid rgba(255,255,255,.15);
}
.image-frame:hover{ transform: translateY(-1px); transition: transform .2s ease; }

footer{
  width:100%;
  padding: 0 1rem 2rem;
}
.product-ad{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:1rem;
  width: min(980px, 92%);
  margin: .75rem auto;
  padding: .8rem 1rem;
  border-radius:12px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.product-ad h3{
  font-size: 0.95rem;
  margin:0;
  color:#ffd9d9;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.product-ad a{ text-decoration:none; color:inherit; }
.product-ad p{
  margin:0;
  padding:.6rem 1rem;
  border-radius:8px;
  color:#fff;
  font-weight:700;
  background: linear-gradient(#ff4141,#d11a1a);
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
  display:inline-block;
}
.product-ad a:focus-visible,
.product-ad button:focus-visible,
.product-ad p:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 639px){
  .image-frame{ border-radius: 14px; padding: .4rem; }
  .image-frame img{ border-radius:10px; }
  footer{ padding-bottom: 1.5rem; }
}
@media (min-width: 640px){
  main{ padding: 8vh 2rem 3rem; }
}
@media (min-width: 900px){
  body{ background-attachment: fixed; }
  .product-ad{ padding: .95rem 1.25rem; }
  .product-ad h3{ font-size:1rem; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
} 

/* Subtle cyber glow for hacker vibe on focus of interactive elements (high contrast) */
a:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:6px; }
button:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:6px; }