/* Section: Base tokens & resets */
:root {
  /* Palette (turquoise + deep plum) */
  --bg: #0b0014;
  --bg-2: #1a0f2a;
  --surface: rgba(0, 255, 210, 0.14);
  --surface-2: rgba(0, 255, 210, 0.22);
  --text: #e8fbff;
  --muted: rgba(232,246,251,.75);
  --accent: #2af6e0;
  --accent-2: #7b2bd6;
  --plum: #4b0a44;
  --plum-2: #6a1a76;
  --white: #ffffff;
  --shadow: 0 6px 20px rgba(0,0,0,.25);
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body, header, nav, main, article, footer, aside { height: auto; }
html, body { min-height: 100%; }

/* Base typography & layout (mobile-first) */
html { font-size: 16px; }
body {
  margin: 0;
  color: var(--text);
  background: 
    linear-gradient(135deg, var(--bg) 0%, #14011e 60%, #0b0014 100%),
    radial-gradient(circle at 20% 0%, rgba(0, 255, 210, .20), transparent 40%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
  background-attachment: fixed;
  background-blend-mode: overlay;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: clamp(14px, 0.9vw + 12px, 18px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-y: auto;
}
img { max-width: 100%; display: block; }

/* Section: Layout primitives */
.container { max-width: clamp(860px, 88vw, 1200px); margin: 0 auto; padding: 0 1rem; }

/* Grid / card helpers */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { background: rgba(10, 12, 28, 0.32); border: 1px solid rgba(110, 255, 255, 0.28); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Section: Glass panel aesthetics (fallback included) */
.glass { background: rgba(14, 18, 40, 0.28); border: 1px solid rgba(110, 255, 255, 0.28); border-radius: var(--radius); padding: 1rem; box-shadow: 0 8px 28px rgba(0,0,0,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Section: Image frame styling */
.image-frame { width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 0 18px rgba(0,255,210,.25); }
.image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Content helpers */
.content { padding: .5rem 0; }

/* Section: Navigation & structural elements (stubs for completeness) */
nav { display: block; }

/* Section: Links & actions (buttons) */
a, button, .btn, .cta {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
a:hover, a:focus-visible, button:hover, .btn:hover, .cta:hover { text-decoration: underline; transform: translateY(-1px); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 6px;
}
.btn { padding: .55rem .95rem; border: 1px solid rgba(42,246,224,.85); border-radius: 8px; background: rgba(0,0,0,.25); color: #eaffff; font-weight: 600; }
.btn--solid { background: linear-gradient(135deg, rgba(42,246,224,.95), rgba(123,43,214,.95)); border: 1px solid rgba(42,246,224,.95); color: #041c1a; }
.btn--outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); }

/* Section: Lists & text blocks */
ul { padding-left: 1.25rem; margin: .5rem 0; }
li { margin: .25rem 0; }

/* Section: Featured content blocks */
.featured-image { margin: 0 0 .75rem; }

/* Section: Subtle utility tags */
.tag { display: inline-block; padding: .25em .5em; border-radius: 999px; background: rgba(0,0,0,.25); border: 1px solid rgba(0,255,230,.4); color: #dff; font-size: .75rem; }

/* Section: Header, Main, Article, Aside, Footer (structure styling) */
html, body, header, nav, main, article, footer, aside { scroll-margin-top: 6px; }
header { padding: 1rem 0; }
header h1 { margin: 0 0 .25rem; font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem); color: var(--text); letter-spacing: .02em; }
header .meta { font-size: .9rem; color: rgba(235,255,255,.8); }

/* Main content container styling for a strong hierarchy */
main { padding: 1rem 0; }
article { margin: 1rem auto; padding: 1rem; border-radius: 14px; background: rgba(10,12,28,.32); border: 1px solid rgba(110,255,255,.28); box-shadow: 0 6px 20px rgba(0,0,0,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Hero-like typography for headings inside articles */
article h2 { font-size: clamp(1.25rem, 1vw + 1rem, 2rem); margin: .35rem 0 0.5rem; color: #eaffff; }

/* Image-block adaptation for articles */
.featured-image { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); margin-bottom: .75rem; }

/* Footer content panels (glass panels) */
footer { padding: 1rem 0; display: grid; gap: 0.75rem; grid-template-columns: 1fr; justify-items: stretch; }
.product-ad, .sponsored-page { display: block; text-align: center; padding: .75rem; border-radius: 12px; background: rgba(12, 16, 28, 0.32); border: 1px solid rgba(110, 255, 255, .28); box-shadow: var(--shadow); }

/* Section: Print-optimized readability (basic) */
@media print {
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f3fb;
    --bg-2: #e9e0f7;
    --text: #0b0410;
    --muted: rgba(15,17,24,.75);
    --surface: rgba(20, 20, 40, 0.08);
    --surface-2: rgba(20, 40, 60, 0.12);
    --accent: #0a7c83;
    --accent-2: #5f2bd6;
    --plum: #6a2a87;
  }
  body {
    background: linear-gradient(135deg, #f6f6fb 0%, #efe9fb 60%, #f7f7fb 100%);
    color: var(--text);
  }
  header { background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(6px); }
  article { background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.08); }
}