:root{
  --bg: #041f1f;
  --bg-2: #062727;
  --text: #eaffff;
  --muted: #9bead6;
  --accent: #1ee3c8;
  --accent-2: #ffd400;
  --card: rgba(255,255,255,0.12);
  --card-border: rgba(255,255,255,0.30);
  --surface: rgba(255,255,255,0.10);
  --surface-2: rgba(255,255,255,0.20);
  --shadow: 0 8px 26px rgba(0,0,0,.25);
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 16px}
body{
  margin:0;
  color:var(--text);
  background-color:var(--bg);
  /* Layered background: gradient + teal grid + subtle scanlines */
  background-image:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    linear-gradient(to right, rgba(0,255,210,.20) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,255,210,.20) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
  background-blend-mode: overlay, overlay, overlay;
  min-height:100%;
  position:relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before{
  content:"";
  position: fixed;
  inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity:.25;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.container{max-width: clamp(720px, 90vw, 1120px); margin:0 auto; padding:0 1rem}
header, main, footer{position:relative}
header{padding:1.75rem 0; text-align:center}
header h1{ font-size:clamp(1.8rem,6vw,3rem); line-height:1.15; margin:0 0 .25rem; letter-spacing:.2px }
header .meta{ color:var(--muted); font-size:clamp(.95rem,2.5vw,1.05rem) }
main{ padding:1rem 0 0 }
article{ display:block; padding:1rem; margin:0 auto; }
.featured-image,.image-frame{ border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.25); box-shadow:0 6px 18px rgba(0,0,0,.25); background:#0b1f1d; margin:.75rem 0 1rem; }
.featured-image img{ width:100%; height:100%; object-fit:cover; display:block }
.image-frame{ /* compatibility shim if used elsewhere */ }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block }
h2{ font-size: clamp(1.6rem, 4vw, 2.4rem); margin:.6rem 0 .4rem }
p{ font-size: clamp(1rem, 2.6vw, 1.125rem); line-height:1.6; color:#eaffff; margin:.75rem 0 }
blockquote{ margin:.75rem 0; padding:.5rem 1rem; border-left:4px solid var(--accent); background: rgba(0,0,0,.15); border-radius:6px; color:#eaffff }
h3{ font-size: clamp(1.2rem, 3vw, 1.4rem); margin-top:.9rem }
ul{ margin:.5rem 0 1rem 1.25rem; padding:0 }
li{ margin:.25rem 0 }
.content{ padding: .75rem; border-radius:10px; background: var(--surface); border: 1px solid rgba(255,255,255,.25) }
.product-ad{ display:block; padding:1rem; border-radius:12px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); text-align:center; margin:.75rem 0 1rem 0 }
.product-ad h3{ margin:0 0 .5rem; font-size:1.05rem }
.product-ad a{ display:inline-block; padding:.6rem 1rem; border-radius:8px; background:var(--accent-2); color:#062b2a; text-decoration:none; font-weight:700; border:1px solid rgba(0,0,0,.15) }
.product-ad a:hover,.product-ad a:focus{ text-decoration: none; background:#ffe44d; color:#062b2a; outline:0 }
footer{ padding:1rem 0; }
footer p{ text-align:center; color:var(--muted); margin:.25rem 0 0; font-size:.95rem }
a, button, .btn, .cta{ font-family:inherit; color:var(--accent); text-decoration:none; }
a{ color:var(--accent); }
a:hover{ text-decoration:underline; color:var(--accent-2) }
a:focus-visible, button:focus-visible, .btn:focus-visible, .cta:focus-visible{ outline:3px solid var(--accent-2); outline-offset:2px; border-radius:6px }
.btn{ display:inline-block; padding:.5rem 1rem; border-radius:6px; border:1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.22); color:var(--text); cursor:pointer; font-weight:700 }
.btn.primary{ background:var(--accent); border-color: rgba(0,0,0,.15); color:#062b2a }
.btn.ghost{ background: transparent; border:1px solid rgba(255,255,255,.4); color:var(--text) }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem }
.card{ background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:1rem; box-shadow:var(--shadow) }
.tag{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.75rem; background: rgba(0,255,213,.15); color:#d6fffb; border:1px solid rgba(0,255,213,.5) }
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important }
}
@media print{
  body{ background:white; color:black }
  a{ text-decoration:underline }
}
@media (max-width: 720px){
  header{ padding:1rem 0 }
  .featured-image{ margin: .5rem 0 1rem }
}
.spec-clarity{ /* helper when adding content sections */ }