/* Base */
:root {
  --bg: #0a0a0a;
  --bg-2: #141414;
  --text: #f7f7f7;
  --muted: #b6b6b6;
  --accent: #ff8c00;
  --accent-2: #ffa633;
  --card: rgba(255,255,255,0.08);
  --card-2: rgba(0,0,0,0.55);
  --border: rgba(255,255,255,0.25);
  --shadow: 0 6px 20px rgba(0,0,0,.45);
  --focus: 3px solid rgba(255, 140, 0, 0.8);
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html, body { margin: 0; padding: 0; color: var(--text); background: var(--bg); font-family: var(--font); font-size: clamp(14px, 0.9vw + 12px, 18px); line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* Layered background: gradient + carbon-ish weave + scanlines */
body {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.55) 25%, rgba(0,0,0,.65) 50%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.65) 100%),
    linear-gradient(to bottom, rgba(10,10,10,.95), rgba(10,10,10,.95)),
    repeating-linear-gradient(to bottom, rgba(255,140,0,.08) 0 1px, transparent 1px 3px);
  background-blend-mode: overlay, normal, overlay;
}

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

/* Glass panel fallback for no backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  .card { background: rgba(20,20,20,.78); border-color: rgba(255,255,255,.35); }
}

/* Hero / header */
header { padding: 1.25rem 0 0; text-align: center; }
header h1 { font-size: clamp(1.4rem, 1vw + 1.6rem, 2.4rem); line-height: 1.14; margin: 0.25rem 0 0; font-weight: 700; color: var(--text); }

/* Main content */
main { padding: 1rem 0; display: grid; justify-items: center; }

/* Image frame with aspect-ratio, glow and border */
.image-frame { width: min(100%, 860px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 8px 28px rgba(0,0,0,.5); background: rgba(0,0,0,.25); display: grid; place-items: center; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Content utility */
.content { padding: 1rem; }

/* Section footer / product ad blocks */
.product-ad { padding: .75rem; }
.product-ad a { display: block; padding: 1rem; border-radius: 12px; text-align: center; background: linear-gradient(135deg, #ff9e1a, #ff6a00); color: #111; text-decoration: none; border: 1px solid rgba(0,0,0,.15); font-weight: 700; }

/* Sponsored area in footer */
.sponsored-page { padding: .75rem; }
.sponsored-page a { display: block; padding: 1rem; border-radius: 12px; text-align: center; background: rgba(0,0,0,.25); color: var(--text); text-decoration: none; border: 1px solid rgba(255,255,255,.25); font-weight: 700; }

/* Footer typography */
footer { padding: 1rem; text-align: center; color: var(--muted); }

/* Links & buttons */
a, button, .btn, .cta { -webkit-tap-highlight-color: transparent; outline: none; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; color: var(--accent-2); }

/* Buttons (solid and outline) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: 999px; background: var(--accent); color: #111; border: 0; cursor: pointer; font-weight: 700; text-decoration: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); background: #ff7a00; }
.btn:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }

/* Secondary / outline CTAs */
.btn.secondary { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.4); }
.btn.secondary:hover { background: rgba(255,255,255,.08); }

/* CTA alias */
.cta { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.25rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: var(--text); text-decoration: none; font-weight: 700; }

/* Focus helpers for all interactive elements */
:focus-visible { outline: 3px solid rgba(255, 208, 130, 0.9); outline-offset: 2px; }

/* Typography scaling */
h2, h3 { color: var(--text); }

/* Forms (basic) */
input, textarea, select { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: var(--text); padding: .5rem .75rem; border-radius: 8px; width: 100%; }

/* Lists reset per selectors */
ul, li { margin: 0; padding: 0; }

/* Nav, Aside default styles (placeholders for completeness) */
nav { display: block; }
aside { display: block; }

/* Tag utility (tiny pill chips) */
.tag { display: inline-block; padding: .25em .6em; border-radius: 999px; font-size: .75rem; background: rgba(255,255,255,.15); color: #fff; }

/* Print */
@media print {
  body { background: #fff; color: #000; }
  a { text-decoration: underline; color: #000; }
}

/* Light scheme variant */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f7f7;
    --bg-2: #eef0f2;
    --text: #111;
    --muted: #444;
    --accent: #d45504;
    --accent-2: #e07b28;
    --card: rgba(255,255,255,0.95);
    --border: rgba(0,0,0,.15);
    --shadow: 0 6px 16px rgba(0,0,0,.08);
  }
  body { background: #f7f7f7; color: var(--text); }
  .image-frame { border-color: rgba(0,0,0,.15); background: #fff; }
  a { color: #b44700; }
  .btn { background: var(--accent); color: #fff; }
  .btn.secondary { color: var(--text); border-color: rgba(0,0,0,.2); background: rgba(255,255,255,.7); }
  .product-ad a { color: #111; }
  .sponsored-page a { background: #eee; }
}