:root{
  --bg: #0a0b0f;
  --bg-2: #141821;
  --surface: rgba(255, 64, 161, 0.16);
  --surface-2: rgba(255,255,255,0.08);
  --text: #f7f7ff;
  --muted: #cbd5e1;
  --accent: #ff2e9a;
  --accent-2: #ff6b2d;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(0,0,0,.35);
  --focus: 2px solid #fff;
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-size:16px}
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  /* Layered background: gradient + subtle scanlines/noise (pure CSS) */
  background-image:
    linear-gradient(135deg, rgba(255, 64, 161, .14), rgba(0,0,0,0) 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
  background-blend-mode: overlay;
  min-height:100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height:1.5;
}

header, main, footer{ width:100% }

/* Layout helpers */
.container{ width:100%; max-width: clamp(720px, 68vw, 1100px); padding-inline:1rem; margin-inline:auto }
.grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.card{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }

/* Glass panels with fallback */
.glass{ background: var(--surface); border:1px solid rgba(255,255,255,.28); border-radius:var(--radius); padding:0.75rem 1rem; }
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px){
  .glass{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

/* Typography scales (mobile-first) */
header h1{ font-size: clamp(1.8rem, 3vw + 1rem, 3.6rem); line-height:1.08; margin:.25rem 0 .25rem; text-wrap:balance }
main{ padding:1rem 0 0 }
h2{ font-size: clamp(1.25rem, 0.9vw + 1rem, 2rem); margin:0.75rem 0 0.25rem; font-weight:700 }
h3{ font-size: clamp(1.1rem, 0.8vw + .9rem, 1.4rem); margin:.75rem 0 0.25rem; font-weight:700}
p{ color: var(--muted); margin:.75rem 0 }
ul{ margin: .5rem 0 .75rem 1.15rem; padding:0 }
li{ margin:.25rem 0 }

/* Image framing (supports .image-frame and .featured-image in markup) */
.image-frame, .featured-image{ width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.28); display:block; background:#111; box-shadow:0 6px 20px rgba(0,0,0,.25) }
.image-frame img, .featured-image img{ width:100%; height:100%; object-fit:cover; display:block }

/* Content wrapper for article text if present */
.content{ padding: .25rem 0; color: var(--text) }

/* Product ad block (footer) */
.product-ad{ display:inline-block; padding:.75rem 1rem; border-radius:12px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:var(--text); text-align:left; }
.product-ad h3{ margin:.25rem 0 0.25rem; font-weight:700; font-size:1.05rem }
.product-ad a{ color:var(--text); text-decoration:none; display:inline-block; margin-top:.25rem }
.product-ad a:hover, .product-ad a:focus{ text-decoration:underline }

/* Links and buttons (AA accessibility focus states) */
a{ color: var(--accent); text-decoration:none }
a:hover, a:focus{ text-decoration: underline; color: var(--accent-2) }
button, .btn, .cta{ font: inherit; cursor:pointer; border-radius:999px; border:1px solid rgba(255,255,255,.4); padding:.65rem 1.1rem; color:#fff; background: linear-gradient(135deg, rgba(255,64,161,.95), rgba(255,107,58,.95)); transition: transform .15s ease, background .2s ease, border-color .2s ease; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-shadow:0 1px 0 rgba(0,0,0,.2) }
button[disabled], .btn[disabled], .cta[disabled]{ opacity:.6; cursor:not-allowed }
.btn{ background: linear-gradient(135deg, rgba(255,64,161,.95), rgba(255,107,58,.95)); border-color: rgba(255,255,255,.55) }
.btn--outline{ background: transparent; border-color: rgba(255,255,255,.65); color: var(--text) }
.btn:focus-visible, .cta:focus-visible, .btn:focus, .cta:focus{ outline: 3px solid #fff; outline-offset: 2px; }

/* Subtle hover/active effects */
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

/* Layout specifics for this page structure */
header{ padding:1.75rem 0; text-align:center; border-bottom:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); border-radius:0 0 var(--radius) var(--radius); margin-bottom:1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }

/* Footer specifics */
footer{ padding:1.5rem 0; border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14) }
footer p{ color:var(--muted); font-size:.9rem; margin:.25rem 0 0.5rem }

/* Responsive tweaks */
@media (min-width: 860px){
  .container{ padding-inline: 1.25rem }
  main{ padding: 0 0 1rem; }
  .grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
  footer{ display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:center; padding:2rem 0 }
}

/* Print-friendly */
@media print{
  body{ background:#fff; color:#000 }
  a{ color:#000; text-decoration:underline }
  header, footer{ background:transparent; border:0 }
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important }
}