/* Base */
:root{
  --bg: #0e0f12;
  --bg-2: #1a1e26;
  --surface: rgba(22,26,34,.65);
  --surface-2: rgba(255, 140, 0, 0.12);
  --text: #eaf0f6;
  --muted: #a6adbb;
  --accent: #ff7a1a;      /* sunset orange */
  --accent-2: #ffd07a;
  --border: rgba(255,255,255,.28);
  --card: rgba(15,17,26,.65);
  --focus: 0 0 0 3px rgba(255,122,26,.55);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --radius: 12px;
}
*{box-sizing:border-box}
html, body, header, nav, main, article, footer, aside{ display: block; }
html, body{ height: 100%; }
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.55;
  /* Layered background: gradient + subtle noise/scanlines */
  background:
    linear-gradient(135deg, rgba(20,20,20,.92) 0%, rgba(14,14,16,.92) 60%, rgba(20,20,24,.92) 100%),
    radial-gradient( circle at 10% -10%, rgba(255,120,0,.10) 0%, transparent 40% ),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 2px);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* Layout utilities */
.container{ width:100%; max-width:clamp(320px, 92%, 1200px); margin-inline:auto; padding-inline:1rem; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.card{ padding:1rem; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.15); }

/* Header + navigation */
header{ padding:1rem 0; text-align:center; }
header h1{ margin:.25rem 0 .5rem; font-size:clamp(1.6rem, 4vw + 0.5rem, 2.6rem); letter-spacing:.2px; }
nav{ display:flex; justify-content:center; gap:.75rem; padding:0.25rem 0 0; }
nav a{ color:var(--text); text-decoration:none; padding:.25rem .5rem; border-radius:6px; border:1px solid transparent; }
nav a:hover, nav a:focus{ text-decoration:underline; outline:0; }

/* Main + content areas */
main{ padding:1rem 0 0; display:block; }
article{ display:block; width:100%; }
.content{ padding:1rem; max-width:72ch; margin-inline:auto; color:var(--text); }

/* Image frame styling */
.image-frame{ width:min(720px, 92%); aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.28);
  background:#0b0b0f; margin:0 auto; box-shadow:0 12px 28px rgba(0,0,0,.45); }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Glass panel utility (fallback included) */
.glass{ background: rgba(18,22,30,.62); border:1px solid rgba(255,255,255,.28); border-radius:var(--radius);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-background-clip: padding-box; background-clip: padding-box;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); padding:1rem; }
@supports not (backdrop-filter: blur(12px)){ .glass{ background: rgba(18,22,30,.88); } }

/* Footer panels (ads / sponsored) */
footer{ padding:1rem 0 2rem; display:grid; gap:1rem; justify-items:center; }
.product-ad, .sponsored-page{ width:min(92%, 900px); padding:1rem; border-radius:var(--radius);
  background: rgba(18,22,30,.62); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(0,0,0,.38); text-align:center;
}
.product-ad a, .sponsored-page a{ color:var(--text); text-decoration:none; display:block; padding:0.25rem; }
.product-ad a:hover, .sponsored-page a:hover{ text-decoration:underline; }

/* Links & interactive elements */
a, button, .btn, .cta{ font:inherit; color:var(--text); text-decoration:none; }
a{ color:var(--accent-2); }
a:hover, a:focus{ text-decoration:underline; color:var(--accent); }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* Button variants (solid and outline) */
.btn{ display:inline-block; padding:.70em 1.1em; border-radius:8px; border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.05); color:var(--text); cursor:pointer; transition: transform .15s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.primary{ background: var(--accent); border-color: rgba(255, 122, 26, .95); color:#fff; }
.btn.outline{ background: transparent; border:1px solid rgba(255,255,255,.45); }

/* Utilities / typography tweaks */
.tag{ display:inline-block; padding:.25em .6em; font-size:.75rem; border-radius:999px; background: rgba(255,122,0,.15); color:#ffdcb3; }

/* Form base (if present) */
input, textarea, select, button{ font-family:inherit; font-size:1rem; color:var(--text); background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.25); border-radius:6px; padding:.5em .75em; outline:none;
}
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Print styles (readable) */
@media print{
  body{ background: #fff; color:#000; }
  a{ color:#000; text-decoration:underline; }
  .glass, .product-ad, .sponsored-page{ background: #fff; border:none; box-shadow:none; }
}