:root{
  --bg: #0b0f14;            /* charcoal baseline */
  --bg-2: #141923;          /* deeper layer */
  --text: #e9f2ff;           /* high-contrast text on dark */
  --muted: #aeb7c5;          /* secondary text */
  --accent: #ff2d9c;          /* neon pink primary */
  --accent-2: #ff6bd6;        /* neon pink secondary */
  --glass: rgba(23, 28, 40, 0.42);
  --glass-outline: rgba(255,255,255,0.28);
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
html, body { margin:0; padding:0; color:var(--text); background: 
  linear-gradient(to bottom, rgba(10,12,18,0.96), rgba(8,12,20,0.96)),
  radial-gradient(circle at 15%0%, rgba(255,0,170,0.08), transparent 25%),
  repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 2px);
  background-blend-mode: normal, screen, overlay;
  min-height:100vh;
  background-attachment: fixed;
}
/* Layout primitives */
.container{ width:100%; max-width: clamp(320px, 90vw, 1100px); padding-inline: 1rem; margin-inline: auto; }
.grid{ display:grid; gap:1rem; grid-template-columns: 1fr; }
.card{ background: rgba(17,22,32,0.42); border:1px solid rgba(255,255,255,0.25); border-radius:14px; padding:1rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card.no-blur{ backdrop-filter:none; -webkit-backdrop-filter:none; background: rgba(17,22,32,0.65); border-color: rgba(255,255,255,0.28); }
.image-frame{ width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,0.25); box-shadow:0 8px 20px rgba(0,0,0,.25); background:#0b0f14; display:block}
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.05); }
.content{ padding:1rem 0; color: var(--text); }
.tag{ display:inline-block; padding:0.25rem 0.5rem; font-size:0.75rem; border-radius:999px; background: rgba(255,45,156,0.15); color:var(--text); border:1px solid rgba(255,45,156,0.4); }

/* Global typography & helpers */
h1,h2,h3{ margin:0 0 .5rem; line-height:1.15; font-weight:700; color:var(--text) }
p{ margin:0 0 0.75rem; color:var(--muted); font-size: clamp(0.95rem, 0.75rem + 0.8vw, 1.05rem); line-height:1.55 }
a{ color: var(--accent); text-decoration: none; }
a:hover, a:focus{ text-decoration: underline; text-underline-offset: 3px; }

/* Interactive elements */
.btn, .cta{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1rem; border-radius:10px; border:1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color:var(--text); cursor:pointer; text-decoration:none; transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.btn:focus-visible, .cta:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn:hover, .cta:hover{ background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.btn.primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; box-shadow: 0 6px 14px rgba(255,0,120,.4); color: #fff; }
.btn.secondary{ background: rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,.3); color:#fff; }

/* Structural selectors required by the page */
html, body, header, nav, main, article, footer, aside { }
header, main, footer, aside { display:block; }

/* Hero/header styling with glass effect */
header{ padding:1.25rem 0; text-align:center; display:block; margin:0; }
header{ background: rgba(16, 20, 30, 0.42); border:1px solid rgba(255,255,255,0.25); border-radius:14px; backdrop-filter: saturate(1.1) blur(12px); -webkit-backdrop-filter: saturate(1.1) blur(12px); padding: clamp(1rem, 2vw, 2rem); }
header h1{ font-size: clamp(1.4rem, 1.6vw + 1rem, 2.4rem); letter-spacing:.2px; }

/* Main content area */
main{ padding:1rem 0; }
article{ padding:0; }

/* Footer & product ad blocks with glass feel */
footer{ padding:1rem 0; display:block; }
.product-ad, .sponsored-page{ display:block; margin: .25rem 0; }
.product-ad a, .sponsored-page a{ display:block; padding: .75rem 1rem; border-radius:10px; text-align:left; background: rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,.25); color:var(--text); text-decoration:none; }
.product-ad a:hover, .sponsored-page a:hover{ background: rgba(0,0,0,0.35); }

/* Utility rows for lists */
ul{ padding-left: 1.25rem; margin: .5rem 0; }
li{ margin: .25rem 0; color: var(--muted); }

/* Responsive grid utilities */
@media (min-width: 640px){
  .grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (min-width: 960px){
  .grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  header{ padding: 1.5rem 0; }
  main{ padding: 1.25rem 0; }
  .container{ padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Print styles for readability */
@media print{
  html, body{ background: #fff; color: #000; }
  header, main, footer{ border: none; background: transparent; }
  a{ color: #000; text-decoration: underline; }
}