/* Pink carbon-fiber hacker theme with frosted glass, mobile-first */

:root{
  --bg1: rgba(255, 0, 170, 0.25);
  --bg2: rgba(156, 0, 190, 0.25);
  --card: rgba(255,255,255,0.12);
  --card-border: rgba(255,255,255,0.25);
  --text: #e9e1f7;
  --muted: #cbd5e1;
  --cta: #8a2be2;
  --cta2: #ff6ad5;
}

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

/* Light reset and base */
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  color: var(--text);
  background-color: #0b0b13;
  /* Pink carbon-fiber vibe: layered gradients + stripes */
  background-image:
    linear-gradient(135deg, rgba(255,0,170,.25) 0%, rgba(140,0,255,.25) 25%, rgba(255,0,170,.25) 50%, rgba(140,0,255,.25) 75%, rgba(255,0,170,.25) 100%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.15) 0 6px, rgba(0,0,0,0) 6px 12px),
    repeating-linear-gradient(-60deg, rgba(255,0,170,.12) 0 6px, rgba(0,0,0,0) 6px 12px);
  background-attachment: fixed, scroll, scroll;
  background-size: 200% 200%, 100% 100%, 100% 100%;
  text-shadow: 0 0 1px rgba(0,0,0,.4);
  line-height: 1.6;
}

header, main, footer { width: 100%; }

/* Frosted glass styles for immersive panels */
.frost { background: var(--card); border: 1px solid var(--card-border);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 14px; }

/* Layout containers */
header { text-align: center; padding: 1.5rem 1rem; position: sticky; top: 0; z-index: 10;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.25);
  backdrop-filter: saturate(1.2) blur(6px); -webkit-backdrop-filter: saturate(1.2) blur(6px);
  margin-bottom: 1rem;
}
header h1 {
  font-weight: 800;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  letter-spacing: .5px;
  margin: 0.25rem 0;
  /* hacker-glow gradient text */
  background: linear-gradient(90deg, #ffd6f0 0%, #d0a6ff 40%, #a46bff 70%, #ffd6f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(168, 90, 255, 0.6);
}
main { display: grid; place-items: center; padding: 1rem; }

/* Image frame (frosted card) */
.image-frame { width: min(92%, 720px); padding: .5rem; border-radius: 14px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

/* Image responsiveness */
.image-frame img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Footer and product ad */
footer { padding: 1rem; display: grid; gap: .75rem; justify-items: center; }

.product-ad { width: min(92%, 720px); padding: 1rem; text-align: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.product-ad h3 { margin-bottom: .5rem; font-size: 1.15rem; color: #ffd6f9; }
.product-ad a { display: inline-block; padding: .75rem 1.25rem; border-radius: 999px;
  background: linear-gradient(135deg, #8a2be2 0%, #d946ef 60%, #ff5ac2 100%);
  color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 6px 14px rgba(0,0,0,.25);
  transition: transform .15s ease; }
.product-ad a:hover { transform: translateY(-1px); }
.product-ad a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Footer caption */
footer p { text-align: center; color: var(--muted); font-size: .9rem; }

/* Focus accessibility for any focusable element inside page */
a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Responsive tweaks */
@media (min-width: 640px) {
  header { padding: 1.75rem 1rem; }
  header h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
  .image-frame { padding: .75rem; }
  .product-ad { width: min(800px, 92%); }
}
@media (min-width: 1024px) {
  main { padding: 2rem 0; }
}