:root{
  --bg: #0a0f1a;
  --panel: rgba(12, 24, 60, 0.65);
  --border: rgba(120, 200, 255, 0.5);
  --text: #e9f4ff;
  --muted: #a9ccff;
  --blue: #4bd3ff;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text);
  background-color:#0a0a0f;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 6px 8px, rgba(0,0,0,.25) 1px, transparent 1px);
  background-size:4px 4px,8px 8px;
  background-blend-mode:overlay;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

/* Hero layout (mobile-first) */
main{
  display:grid;
  place-items:center;
  padding:6vmin 2rem;
  width:100%;
}

.image-frame{
  width:min(92vw,1100px);
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:rgba(8,18,40,.6);
  border:1px solid rgba(120,200,255,.4);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  position:relative;
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
}

.image-frame::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(0,180,255,.15), rgba(0,0,0,.15));
  border-radius:inherit;
  mix-blend-mode:screen;
  pointer-events:none;
}

.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

footer{
  padding:1.25rem 2rem;
  text-align:center;
  color:#a9c9ff;
}

/* Featured product CTA (neon blue hacker style) */
.product-ad{ display:inline-block; padding:.55rem; border-radius:12px;
  background:rgba(6,12,28,.65);
  border:1px solid rgba(100,180,255,.45);
  margin-top:.5rem;
}
.product-ad h3{ font-size:1.05rem; font-weight:600; margin-bottom:.25rem; color:#cfe6ff; }
.product-ad a{ text-decoration:none; }
.product-ad a p{
  display:inline-block;
  padding:.63rem 1.1rem;
  margin:0;
  border-radius:999px;
  background:linear-gradient(135deg,#2a8dff 0%, #1d6aff 100%);
  color:#fff; font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 14px rgba(0,140,255,.6);
}
.product-ad a:focus-visible{
  outline:2px solid #7bd5ff; outline-offset:2px; border-radius:999px;
}

/* Focus for links and interactive elements (accessibility) */
a:focus-visible{ outline:2px solid #7bd5ff; outline-offset:2px; border-radius:4px; }

/* Responsive tweaks for larger screens */
@media (min-width:768px){
  main{ padding:8vmin 4rem; }
  .image-frame{ width:min(800px,78vw); aspect-ratio:16/9; }
}