/* Light reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Theme variables */
:root {
  --bg-dark: #120b20;
  --bg-purple: rgba(120, 0, 180, 0.55);
  --card: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.25);
  --text: #eafff0;
  --muted: #a6ffd0;
  --green: #39ff14;
  --green-dark: #23e10f;
  --shadow: 0 12px 28px rgba(0,0,0,.4);
  --focus: 0 0 0 3px rgba(57,255,20,.8);
}

/* Global styles - mobile first */
html, body {
  height: 100%;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial;
  color: var(--text);
  background-color: var(--bg-dark);
  /* Purple carbon-fiber vibe */
  background-image:
    linear-gradient(135deg, rgba(120,0,180,.85), rgba(40,0,60,.85)),
    repeating-linear-gradient(45deg, rgba(0,0,0,.25) 0 6px, rgba(0,0,0,0) 6px 12px),
    radial-gradient(circle at 15% 0%, rgba(180,0,140,.25), transparent 40%);
  background-size: cover;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout */
main {
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  min-height: 60vh;
}

.image-frame {
  width: min(92vw, 720px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px);
}

.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Subtle auto-brightness hint for hacker vibe */
  filter: saturate(1.05) contrast(1.02);
}

/* Footer with frosted glass CTA panel (prominent CTA) */
footer {
  padding: 1.5rem 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.product-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(8, 0, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: min(92vw, 680px);
}

.product-ad h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .2px;
}

.product-ad a {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: #03240e;
  /* Neon-green pill button */
  background: linear-gradient(180deg, rgba(57,255,20,.95), rgba(0,180,80,.95));
  border: 1px solid rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 14px rgba(57,255,20,.25);
}
.product-ad a:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(57,255,20,.32); }
.product-ad a:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* Text color for the rest of the footer */
.product-ad p { color: #d6ffd8; font-size: .95rem; }

/* Small screen tweaks (mobile-first) */
@media (min-width: 768px) {
  main { padding: 3rem 2rem; }
  .image-frame { border-radius: 20px; }
  .product-ad { padding: 1.1rem 1.25rem; }
  .product-ad h3 { font-size: 1.05rem; }
}

@media (min-width: 1024px) {
  main { padding: 4rem 0; }
  .image-frame { width: 720px; }
  footer { padding-bottom: 2rem; }
}