/* Base tokens */
:root{
  --bg: #0a0f14;
  --bg-2: #0b1410;
  --text: #e9f0e8;
  --muted: #a4c49a;
  --accent: #7f5cff;
  --accent-2: #4af7d1;
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.28);
  --shadow: 0 8px 28px rgba(0,0,0,0.25);
}

/* Reset & helpers */
*{box-sizing:border-box}
html,body{height:100%}
html{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body{
  margin:0;
  color:var(--text);
  font-size:clamp(14px,1.4vw,16px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-image:
    radial-gradient(circle at 25% 10%, rgba(128,255,0,.15), transparent 40%),
    radial-gradient(circle at 75% 20%, rgba(0,120,255,.15), transparent 40%),
    linear-gradient(135deg, rgba(12,25,8,.9) 0%, rgba(5,7,10,.9) 60%, rgba(0,0,0,.9) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px);
  background-blend-mode:overlay,overlay,normal,overlay,overlay;
  min-height:100%;
  position:relative;
  isolation:isolate;
}
a{color:var(--text); text-decoration:none}
a:focus-visible, button:focus-visible{outline:3px solid rgba(127, 89, 255,.85); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Layout primitives */
.container{width:100%; max-width:clamp(320px,92vw,1100px); padding:0 1rem; margin-inline:auto}
.grid{display:grid; gap:.75rem}
.card{ background:var(--glass); border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow:var(--shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
@supports not (backdrop-filter: blur(10px)){
  .card{ background: rgba(255,255,255,.12); }
}
.image-frame,.featured-image{ border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.28); box-shadow:0 6px 18px rgba(0,0,0,.25) }
.image-frame{ aspect-ratio:16/9; }
.image-frame img,.featured-image img{ width:100%; height:100%; object-fit:cover; display:block }
.content{ padding: .5rem 0 0 }

/* Header / hero styling */
header{
  padding:1rem 1rem;
  margin:0 auto 1rem;
  border-radius:14px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 8px 28px rgba(0,0,0,.25);
}
header h1{ margin:0 0 .25rem; font-size:clamp(1.75rem,3vw+1rem,3.25rem); line-height:1.12; letter-spacing:.2px }
header .meta{ font-size:0.95rem; color:var(--muted) }

/* Typographic scale for content */
h2{ font-size:clamp(1.25rem,2.2vw,2rem); margin:.75rem 0 .5rem }
h3{ font-size:clamp(1rem,1.6vw,1.3rem); margin:.75rem 0 }
p{ margin:0 0 1rem }

/* Lists & quotes */
ul{ padding-left:1.25rem; margin:0 0 1rem }
li{ margin:.25rem 0 }
blockquote{ margin:1rem 0; padding:.75rem 1rem; border-left:4px solid var(--accent); background: rgba(0,0,0,.15); }

/* Footer / ads blocks */
footer{ padding:1rem; display:grid; gap:.75rem; grid-template-columns:1fr; border-top:1px solid rgba(255,255,255,.15) }
footer .product-ad,.sponsored-page{ padding:.75rem; border-radius:12px; text-align:center; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25) }
footer p{ text-align:center; color:var(--muted); margin:.5rem 0 0 }

/* CTA & links */
.btn{ display:inline-block; padding:.75rem 1.1rem; border-radius:999px; border:1px solid rgba(255,255,255,.45); background:var(--accent); color:#fff; font-weight:700; text-decoration:none; cursor:pointer; transition:transform .15s ease, background .2s ease }
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05) }
.btn:active{ transform: translateY(0) }
.btn--outline{ background:transparent; border:2px solid rgba(255,255,255,.85); color:var(--text) }
.cta{ display:inline-block; }

a:hover{text-decoration:underline; text-underline-offset:3px}

/* Responsive tweaks */
@media (min-width:600px){
  footer{ grid-template-columns:1fr 1fr; align-items:stretch }
}
@media (min-width:900px){
  .container{ padding:0 0 }
  header{ padding:1.25rem 1.25rem }
  main{ padding:0 0 1rem }
  .featured-image{ margin:0 0 1rem }
}

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