/* Base Tokens */
:root{
  --bg: #0b001a;
  --bg-2: #150d2c;
  --text: #e6feff;
  --muted: #a7b3c5;
  --accent: #00e5ff;
  --accent-2: #ff2fb2;
  --card: rgba(255,255,255,.12);
  --card-border: rgba(255,255,255,.28);
  --glass: rgba(255,255,255,.12);
}
html, body, header, nav, main, article, footer, aside { height: auto; }
html, body { height: 100%; min-height: 100vh; margin: 0; padding: 0; color: var(--text); background: 
  linear-gradient(135deg, rgba(10,0,20,.95) 0%, rgba(8,6,25,.92) 60%, rgba(10,0,20,.96) 100%),
  linear-gradient(to bottom right, rgba(0,229,255,.04), rgba(255,0,190,.04)),
  repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 2px),
  repeating-linear-gradient(to right, rgba(0,0,0,.04) 0 1px, transparent 1px 2px); }

/* Layout & Typographic Foundations (Mobile-First) */
* { box-sizing: border-box; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
       font-size: clamp(14px, 1.2vw + 12px, 16px); line-height: 1.5; color: var(--text); }
h1, h2 { margin: 0 0 .5em; font-weight: 700; color: var(--text); }
h1 { font-size: clamp(1.75rem, 3vw + 1rem, 3.5rem); line-height: 1.04; letter-spacing: .2px; }
h2 { font-size: clamp(1.25rem, 2vw + .8rem, 2rem); }

/* Header / Intro panel with glass feel */
header { padding: 1.25rem; text-align: center; position: sticky; top: 0; z-index: 10;
         background: rgba(8,0,15,.35); border-bottom: 1px solid rgba(255,255,255,.15);
         backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
header h1 { font-family: ui-sans-serif, system-ui; font-weight: 700; margin-bottom: .25rem; color: var(--text); }
header .meta { color: var(--muted); font-size: .9rem; margin-bottom: .5rem; }

/* Navigation styling */
nav a { color: var(--accent); text-decoration: none; padding: .25rem .55rem; border-radius: 6px;
        border: 1px solid rgba(0,229,255,.35); background: rgba(0,0,0,.15); }
nav a:hover, nav a:focus { text-decoration: underline; outline: none; }

/* Container & Grid Utilities */
.container { width: 100%; max-width: clamp(320px, 92vw, 1100px); padding: 0 1rem; margin: 0 auto; }
.grid { display: grid; gap: 1rem; }
.card { background: var(--glass); border: 1px solid rgba(255,255,255,.25);
       border-radius: 14px; padding: .75rem; backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,.25);
       }

/* Image handling (including required .image-frame) */
.image-frame { aspect-ratio: 16/9; width: 100%; overflow: hidden; border-radius: 12px;
              border: 1px solid rgba(255,255,255,.28); box-shadow: 0 6px 20px rgba(0,0,0,.4);
              display: block; background: rgba(255,255,255,.04); }
.image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }

/* Featured content region */
main { padding: 1rem 0 2rem; }
article { text-wrap: pretty; max-width: 860px; margin: 0 auto; padding: 0 0.5rem; }
.featured-image { margin: 1rem auto 1rem; width: 100%; }
.featured-image img { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.25);
                   box-shadow: 0 6px 20px rgba(0,0,0,.35); }

/* Content area styling (supports .content if used) */
.content { padding: .75rem 0; color: var(--text); }
.content p { margin: .6em 0; }

/* Section: product-ad (footer area) */
.product-ad { padding: .75rem; border-radius: 12px; background: rgba(0,0,0,.18);
               border: 1px solid rgba(255,255,255,.25); display: inline-block; min-width: max-content;
               margin: .25rem; }
.product-ad a { color: var(--text); text-decoration: none; display: block; padding: .5rem 1rem; border-radius: 8px;
               background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.25); }
.product-ad a:hover, .product-ad a:focus-visible { text-decoration: underline; outline: none; }

/* Links, Buttons & CTAs */
a, button, .btn, .cta { font: inherit; color: var(--text); text-decoration: none; cursor: pointer; }
a:hover, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; text-decoration: underline; text-underline-offset: 3px; }
.btn, .cta { display: inline-flex; align-items: center; justify-content: center;
           padding: .65rem 1.05rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.15);
           background: var(--accent); color: #002028; font-weight: 700; letter-spacing: .2px;
           transition: transform .2s ease, background .2s ease; }
.btn:hover, .cta:hover { transform: translateY(-1px); background: #00d9f2; }
.btn:active, .cta:active { transform: translateY(0); }
.btn--outline { background: transparent; color: var(--text); border: 1px solid rgba(0,229,255,.6); }

/* Lists */
ul { padding-left: 1.25rem; margin: .75rem 0; }
li { margin: .25rem 0; }

/* Glass panels (with fallback) */
.glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
        border-radius: 12px; padding: .75rem; box-shadow: 0 6px 20px rgba(0,0,0,.25);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Fallback if backdrop-filter not supported */
@supports not (backdrop-filter: blur(8px)) {
  .glass { background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); }
}

/* Utility */
.tag { display: inline-block; padding: .2em .5em; border-radius: 999px; font-size: .75rem;
       background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.25); color: var(--text); }

/* Print readability */
@media print {
  body { color: #000; background: #fff; }
  header, nav, footer { display: block; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}