/* Tokens */
:root{
  --bg: #0a0a0f;
  --bg-2: #141621;
  --text: #e9eef5;
  --muted: #9aa8c4;
  --accent: #2be4f0;
  --accent-2: #8a7dff;
  --card: rgba(18,18,28,.22);
  --edge: rgba(255,255,255,.28);
  --ring: 2px solid var(--accent);
}

/* Base & Layout (Mobile-first) */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  color:var(--text);
  background: 
    linear-gradient(135deg, rgba(12,12,20,.75) 0, rgba(6,7,12,.95) 60%),
    radial-gradient(circle at 20% 0%, rgba(42,228,240,.08), transparent 40%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
  background-color:var(--bg);
  font-family: ui-system, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color-scheme:dark;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
a, button, .btn, .cta{cursor:pointer; text-decoration:none; color:inherit; background:transparent; border:0; font:inherit}
img{max-width:100%; display:block; height:auto}

/* Utilities */
.container{max-width:clamp(640px, 90vw, 1120px); margin-inline:auto; padding:1rem}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem}
.card{padding:1rem; border-radius:12px; background:var(--card); border:1px solid var(--edge); box-shadow:0 6px 20px rgba(0,0,0,.25)}
.tag{display:inline-block; padding:.15em .5em; font-size:.8rem; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:var(--muted)}

/* Layered background polish (pewter/black, subtle scanlines) */
body{ background-attachment: fixed; }
@supports (backdrop-filter: blur(0px)){
  body{ backdrop-filter: none; }
}
@media (min-width:0){
  /* no-op to hint the browser; actual backdrop in panels below */
}
@media (prefers-reduced-motion: no-preference){
  body{ background-image:
      linear-gradient(135deg, rgba(14,16,25,.88) 0, rgba(8,10,18,.96) 60%),
      radial-gradient(circle at 25% 0%, rgba(43,228,240,.08), transparent 40%),
      repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
    background-blend-mode: overlay;
  }
}

/* Glass panels (fallback if backdrop-filter unsupported) */
.card, header, article, footer, .image-frame{ background: rgba(12,12,20,.22); border:1px solid rgba(255,255,255,.28); border-radius:12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }

/* Header (hero region) */
header{ padding:1.25rem; margin:0 auto 1rem; border-radius:14px; }
header h1{ font-size: clamp(1.6rem, 1.4rem + 2vw, 2.6rem); line-height:1.15; margin:0 0 .25rem; letter-spacing:.2px; font-weight:800; }
header .meta{ font-size: .92rem; color: var(--muted); margin-top:.25rem }
nav{ margin-top:.5rem }
nav a{ display:inline-block; padding:.4rem .6rem; border-radius:6px; border:1px solid rgba(255,255,255,.28); color:var(--text) }

/* Main content & article */
main{ padding:0 1rem 1rem }
article{ max-width:70ch; margin-inline:auto; padding:1rem; background: rgba(10,10,18,.22); border-radius:12px; border:1px solid rgba(255,255,255,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
article h2{ font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); margin:.75rem 0 .5rem; }
article h3{ font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); margin:.6rem 0 .4rem }
article p{ font-size: clamp(0.95rem, .85rem + .4vw, 1.1rem); color:#e9eef5; margin:.4rem 0 1rem; }
article ul{ margin: .4rem 0 1rem 1.15rem; padding:0; }
article li{ margin:.25rem 0; }

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

/* Featured image wrapper (same idea) */
.featured-image{ border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.28); box-shadow:0 8px 20px rgba(0,0,0,.25); }

/* Footer & sections (product ad blocks) */
footer{ padding:1rem; display:grid; gap:.75rem; grid-template-columns:1fr; }
.product-ad, .sponsored-page{ padding:.75rem; border-radius:10px; text-align:center; background: rgba(12,12,22,.28); border:1px solid rgba(255,255,255,.28) }
.product-ad a, .sponsored-page a{ display:block; padding:.75rem; color:var(--text); }

/* Responsive footer layout */
@media (min-width: 640px){
  footer{ grid-template-columns: repeat(3, 1fr); align-items: start; }
}
@media (min-width: 1024px){
  article{ margin-inline: auto; padding:1.25rem 1.25rem; }
  .container{ padding:0 1.25rem; }
}

/* Buttons & CTAs (solid and outline variants) */
a, button, .btn, .cta{ color:var(--text); text-decoration:none; background:transparent; border:0; font:inherit; }
.btn, .cta{ display:inline-block; padding:.6em 1em; border-radius:6px; border:1px solid rgba(255,255,255,.28); background: rgba(2,2,2,.24); transition: transform .2s ease, background .2s ease; }
.btn:hover, .cta:hover{ background: rgba(2,2,2,.5); transform: translateY(-1px) }
.btn:active, .cta:active{ transform: translateY(0) }
.btn.primary{ background: var(--accent); color: #062026; font-weight:700; border-color: rgba(0,0,0,.15) }
.btn.primary:hover{ background:#1be7ff }
.btn.outline{ background: transparent; border:1px solid var(--accent); color:var(--text) }
a:focus-visible, button:focus-visible, .btn:focus-visible, .cta:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Focus & link underlines for accessibility */
a:focus-visible{text-decoration:underline; text-underline-offset:3px}
a:hover{text-decoration:underline; text-underline-offset:3px}

/* Typography scale helpers (content container) */
.content{ color: var(--text); }

/* Print styles (basic readability) */
@media print{
  body{ background: #fff; color:#000; }
  header, main, footer{ background: transparent; box-shadow:none; }
}