/* CSS for Cyberpunk Frosted Glass Landing (Mobile-first) */

/* Global tokens */
:root{
  --bg: #0b0f14;
  --bg2: #111114;
  --card: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.25);
  --text: #e9e9e9;
  --muted: #b5b5b5;
  --gold: #d4af37;
  --gold-dark: #b08f2f;
  --glow: 0 0 12px rgba(212,175,55,.6);
}
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(100,100,100,.15) 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(120,120,120,.15) 0%, transparent 40%),
    linear-gradient(#0b0f14,#0b0f14);
  min-height:100vh;
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(60,60,60,.25) 0 20%, transparent 21%),
    radial-gradient(circle at 70% 60%, rgba(60,60,60,.25) 0 20%, transparent 21%);
  mix-blend-mode: screen;
  filter: saturate(0.8);
  opacity:.9;
}

/* Links baseline */
a{ color:inherit; text-decoration:none; }

/* Header: Frosted glass / neon gold title */
header{
  text-align:center;
  padding: 1.75rem 1rem 0.75rem;
  position: sticky;
  top:0;
  z-index:10;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
header h1{
  font-size: clamp(1.25rem, 5vw, 2rem);
  margin:.25rem auto .5rem;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(212,175,55,.9);
  font-weight:700;
  letter-spacing:.2px;
}

/* Main content container (centered, responsive) */
main{
  display:block;
  padding:1rem;
  max-width:900px;
  margin:0 auto;
  width:100%;
}

/* Frosted glass image frame (hero/visual) */
.image-frame{
  margin:1.25rem auto;
  padding:.75rem;
  border-radius:14px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 28px rgba(0,0,0,.5),
              inset 0 0 20px rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.image-frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  image-rendering:auto;
}

/* Footer area with a CTA-style ad block */
footer{
  margin:1.5rem auto 2rem;
  padding:.75rem;
  text-align:center;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.12);
}
.product-ad{
  display:inline-block;
  padding:1rem;
  border-radius:12px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  margin-bottom:.75rem;
}
.product-ad h3{ margin:0 0 .5rem; font-size:1.05rem; color:#e9e9e9; }
.product-ad a{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:8px;
  font-weight:700;
  color:#111;
  background: linear-gradient(135deg, #d4af37 0%, #e1bc40 60%, #c99b2d 100%);
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 0 6px rgba(212,175,55,.9);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-ad a:hover{
  transform: translateY(-1px);
  box-shadow:0 4px 14px rgba(212,175,55,.95);
}
.product-ad a:focus-visible{
  outline:3px solid #ffd54f;
  outline-offset:2px;
}

/* Responsive tweaks for larger viewports */
@media (min-width:600px){
  .image-frame{ max-width:860px; }
  header{ padding:1.75rem 1rem 0.75rem; }
}
@media (min-width:900px){
  main{ padding:2rem 1rem; }
  .product-ad{ padding:1.25rem 1.25rem; }
}