/* Base & Tokens */
:root{
  --bg: #0a0a0a;
  --bg-2: #111;
  --text: #f7f7f7;
  --muted: #b8b8b8;
  --accent: #ff7a18;
  --accent-2: #e8a6b9;
  --glass: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.25);
  --shadow: 0 6px 20px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans";}
body{
  margin:0;
  color:var(--text);
  background: 
    radial-gradient(circle at 20% -10%, rgba(255,110,0,.25), transparent 25%),
    linear-gradient(135deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.92) 60%),
    repeating-linear-gradient(to bottom, rgba(255,120,0,.08) 0 2px, transparent 2px 4px);
  background-color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  opacity:.75;
}
@media (prefers-reduced-motion: reduce){
  body::before{ display:none }
}

/* Layout primitives */
.container{ width:100%; max-width: clamp(320px, 90vw, 1120px); margin-inline: auto; padding-inline: 1rem; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }

/* Section semantics styling (glass panels) */
header, main, article, footer, aside{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color:var(--text);
}
@supports not (backdrop-filter: blur(12px)){
  header, main, article, footer, aside{ background: rgba(255,255,255,.14); }
}
header{ margin-block: .5rem 1rem; }
header h1{ margin:.25rem 0 .25rem; font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem); line-height:1.12; letter-spacing:.2px; }
header .meta{ font-size: clamp(.85rem, .4vw + .6rem, 1rem); color: var(--muted); }

/* Content & typography helpers */
main{ padding: 1rem 0; }
article{ line-height: 1.6; font-size: clamp( .95rem, .2vw + .9rem, 1.1rem); }
article h2{ font-size: clamp(1.25rem, 2vw + .5rem, 1.75rem); margin: .75rem 0 .5rem; }
article h3{ font-size: clamp(1.05rem, 1.8vw + .4rem, 1.25rem); margin: .75rem 0 .4rem; }
article p{ margin: .6rem 0; color: #e9e9e9; }
article em{ font-style: italic; color: #ffd5e0; }

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

/* Accessibility helpers for links & focus */
a{ color: var(--accent-2); text-decoration: none; }
a:hover, a:focus-visible{ text-decoration: underline; outline: none; color: var(--accent); }
:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* Buttons & CTAs */
.btn, a.btn{ display:inline-block; padding:.6rem 1rem; border-radius:6px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color:var(--text); text-decoration:none; cursor:pointer; transition: transform .15s ease, background .2s ease, border-color .2s; }
.btn:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.primary{ background: var(--accent); border-color: rgba(255,122,24,.8); color:#111; font-weight:600; }
.btn.primary:hover{ background:#ff9b3d; }

/* Utilities & components */
.card{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:.75rem; }
.tag{ display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.75rem; background: rgba(232,166,185,.6); color:#fff; }

/* Product ad block (footer area) */
.product-ad{ text-align:center; padding: .75rem; border-radius:12px; }
.product-ad h3{ margin:.25rem 0 .5rem; font-size:1.05rem; }
.product-ad a{ display:inline-block; padding:.6rem 1rem; border-radius:999px; background: var(--accent); color:#111; text-decoration:none; border:1px solid rgba(0,0,0,.15); }
.product-ad a:hover{ background:#ff9a3f; }

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

/* Form elements (basic) */
input, textarea, select{ font: inherit; padding:.5rem .6rem; color:var(--text); background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); border-radius:6px; width: 100%; }
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

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

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