/* Reset & base */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

/* Theme & accessibility variables */
:root {
  --bg-dark: #0e0b07;
  --brown-900: #2b1f13;
  --brown-700: #3a2b1b;
  --orange-500: #ff9a1a;
  --orange-600: #f07a00;
  --card: rgba(18, 10, 6, 0.6);
  --text: #f3e7d8;
  --text-dim: #e5d1c0;
  --glow: rgba(255, 180, 60, 0.65);
}

/* Orange waves background (mobile-first, lightweight) */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial;
  color: var(--text);
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,140,0,.25) 0 40px, transparent 40px),
    radial-gradient(circle at 70% 40%, rgba(255,120,0,.25) 0 50px, transparent 50px),
    linear-gradient(#1a0a05 0%, #0f0704 60%, #0a0502 100%);
  mix-blend-mode: screen;
  filter: saturate(120%);
  z-index: -1;
  pointer-events: none;
  opacity: 0.9;
}

/* Layout: mobile-first hero area */
main {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.image-frame {
  width: min(92vw, 760px);
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(18, 10, 6, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: block;
}
.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

/* Footer / CTA block (prominent, accessible) */
footer {
  padding: 1.25rem;
  text-align: center;
  color: var(--text-dim);
  background: linear-gradient(#0b0704, rgba(0,0,0,0.0));
}
.product-ad {
  display: inline-block;
  background: rgba(18, 10, 6, 0.65);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: .75rem 1rem;
  margin-bottom: .75rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.product-ad h3 {
  margin: 0 0 .35rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffd9a1;
}
.product-ad a {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  color: #ffe9cc;
  background: linear-gradient(#3a2310, #2a1707);
  padding: .5rem .9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .15s ease;
}
.product-ad a:hover { transform: translateY(-1px); }
.product-ad a:focus-visible {
  outline: 3px solid #ffd9a1;
  outline-offset: 2px;
}
p { margin: 0; }

/* Accessibility: visible focus for links/buttons in general */
a, button { color: inherit; }

/* Responsive adjustments */
@media (min-width: 768px) {
  main { padding: 3rem 2rem; }
  .image-frame { width: min(60vw, 900px); }
}
@media (min-width: 1024px) {
  main { padding: 4rem 3rem; }
  .image-frame { width: min(54vw, 980px); }
}