/* Global reset (light) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

:root {
  --bg: #0b0418;
  --brown: #6b4a2f;
  --brown-dark: #4b2f1a;
  --brown-light: #8b5a3a;
  --text: #f6e6d0;
  --muted: #cbb39b;
  --accent: #a056f2;
  --focus: 0 0 0 3px rgba(255, 215, 110, 0.9);
  --glass: rgba(18, 10, 7, 0.6);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: var(--text);
  background: var(--bg);
  /* violet circuit-board vibe without images: layered gradients */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(170, 60, 200, 0.25) 0 20%, transparent 20%),
    radial-gradient(circle at 78% 22%, rgba(110, 0, 170, 0.18) 0 20%, transparent 20%),
    conic-gradient(from 180deg at 50% 50%, rgba(60, 20, 60, 0.15), rgba(0,0,0,0.05) 25%, rgba(60, 20, 60, 0.15) 50%, rgba(0,0,0,0.05) 75%, rgba(60, 20, 60, 0.15));
  background-blend-mode: overlay;
  min-height: 100vh;
  line-height: 1.45;
  padding-bottom: 2rem;
}

/* Hero-ish image frame with frosted glass feel (no extra HTML) */
.image-frame {
  width: min(92vw, 860px);
  aspect-ratio: 16 / 9;
  margin: 2rem auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: rgba(26, 12, 9, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* subtle glass glow edge + frost */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08),
              0 0 28px rgba(160, 60, 200, 0.25);
}
.image-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* give a slight color tint for hacker vibe on image */
  filter: saturate(1.05) contrast(1.02);
}

/* footer area with frosted feel for product ad and copyright */
footer {
  margin-top: auto;
  padding: 1rem;
  color: var(--text);
  text-align: center;
  /* soft frosted footer */
  background: linear-gradient(to top, rgba(14, 8, 6, 0.9), rgba(14, 8, 6, 0.65));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.product-ad {
  display: inline-block;
  width: min(92%, 720px);
  text-align: left;
  margin: 0 auto 1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(18, 10, 7, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f7e5d0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.product-ad h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.product-ad a {
  display: inline-block;
  text-decoration: none;
}
.product-ad a p {
  margin: 0;
  padding: 0.55rem 1.0rem;
  background: linear-gradient(#8b4a2b, #5a2b10);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-ad a:hover p {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.product-ad a:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
footer p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Focus for interactive elements outside main content for accessibility */
a:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 4px;
}

/* Responsive tweaks (mobile-first) */
@media (min-width: 768px) {
  .image-frame { width: min(60vw, 700px); }
  footer { padding: 0.75rem 1rem 2rem; text-align: left; }
  .product-ad { margin: 1.25rem auto 0; }
  footer p { text-align: left; }
}