/* Minimal reset and mobile-first foundation */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto; }
body {
  margin: 0;
  padding: 0;
  color: #f7f7fb;
  background-color: #0a0a0f;
  /* Coral low-poly-like triangles background (CSS-only approximation) */
  background-image:
    linear-gradient(135deg, rgba(255, 111, 97, .28) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255, 0, 170, .28) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255, 180, 120, .20) 25%, transparent 25%);
  background-size: 60px 60px, 60px 60px, 60px 60px;
  background-position: 0 0, 30px 15px, 15px 30px;
  background-repeat: repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Color tokens for a hacker/cyberpunk vibe with accessible contrasts */
:root {
  --magenta: #ff2bd6;
  --magenta-dark: #c400c0;
  --coral: #ff6f61;
  --surface: rgba(255, 255, 255, 0.08);
  --glass: rgba(255, 255, 255, 0.14);
  --text: #f7f7fb;
  --text-soft: #d9d5e6;
  --muted: #b8b4c8;
}

/* Layout container for hero-like presentation (mobile-first) */
main {
  display: grid;
  place-items: center;
  padding: 2rem 1rem 0;
  min-height: calc(100vh - 120px);
}

/* Image frame serving as the main visual hero */
.image-frame {
  width: min(96vw, 1000px);
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background: #111;
  isolation: isolate;
  /* Subtle magenta glow on the frame for cyberpunk feel */
  outline: 1px solid rgba(255, 0, 140, .15);
}
.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}
.image-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  /* frosted-glass highlight across the image */
  background: radial-gradient(circle at 75% 15%, rgba(255,255,255,.22) 0 25%, transparent 25%),
              radial-gradient(circle at 20% 70%, rgba(255,0,180,.12) 0 35%, transparent 35%);
  mix-blend-mode: overlay;
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  /* glass edge accent for a frosted vibe */
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(to bottom right, rgba(255,255,255,.08), rgba(255,0,140,.08));
  mix-blend-mode: soft-light;
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: .9;
}

/* Footer with a compact glassy look and a bold CTA tile */
footer {
  padding: 1.75rem 1rem;
  text-align: center;
  color: var(--text-soft);
  background: rgba(2, 0, 14, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}
.product-ad {
  display: inline-block;
  padding: .6rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 64, 160, .6);
  background: rgba(255, 0, 128, .15);
  margin: 0 auto 0.6rem;
}
.product-ad h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  letter-spacing: .2px;
}
.product-ad a {
  text-decoration: none;
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff5a9e, #b500ff);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(187, 0, 255, .6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-ad a:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(187,0,255,.85); }
a:focus-visible { outline: 3px solid #ffd6e0; outline-offset: 2px; border-radius: 6px; }

footer p {
  margin: .5rem 0 0;
  font-size: .875rem;
  color: #d9d9e5;
}

/* Accessibility helpers */
:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Responsive adjustments (mobile-first) */
@media (min-width: 768px) {
  main { padding: 3rem 2rem 0; min-height: 78vh; }
  .image-frame { width: min(860px, 92vw); border-radius: 26px; }
  footer { padding: 2rem 1rem; }
}
@media (min-width: 1024px) {
  .image-frame { width: min(1100px, 88vw); }
  .product-ad { padding: .65rem 1.1rem; }
}