:root{ --bg:#0f1117; --bg2:#1a1f28; --surface:rgba(255,255,255,.08); --surface2:rgba(255,255,255,.14); --text:#e9f4ff; --muted:#97a5bf; --accent:#66baff; --accent-2:#a6e1ff; --border:rgba(255,255,255,.28); --shadow:0 6px 20px rgba(0,0,0,.25); }

html,body{ height:100%; }
html{ box-sizing:border-box; }
*,*:before,*:after{ box-sizing:inherit; }

html, body, header, nav, main, article, footer, aside{ }

html, body{ margin:0; padding:0; }

body{
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  line-height:1.55;
  background-color:#0f1117;
  background-image:
    linear-gradient(135deg, rgba(60,60,90,.95), rgba(20,28,40,.95)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
  background-blend-mode:overlay,overlay;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}
body:before{
  content:"";
  position:fixed; inset:0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.04) 0 1px, transparent 1px 2px);
  opacity:.22; pointer-events:none;
  mix-blend-mode:overlay;
}

header{ text-align:center; padding:2rem 1rem 1rem; }
header h1{ font-size:clamp(1.8rem, 0.8rem + 3vw, 3rem); margin:.15rem 0 0.25rem; line-height:1.15; color:var(--text); }
header .meta{ color:var(--muted); font-size:.92rem; margin-top:.25rem; }

main{ padding:0 1rem 2rem; }
.container, .grid, .card, .tag{ }

.container{ width:100%; max-width:clamp(320px,90vw,1100px); margin:0 auto; padding-inline:1rem; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow:var(--shadow); }

.tag{ display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; background:rgba(102,195,255,.25); color:#dff2ff; border:1px solid rgba(102,195,255,.5); }

.image-frame, .featured-image{ width:100%; border-radius:12px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:#0b0f13; margin:1rem 0; }
.image-frame{ aspect-ratio:16/9; }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

.featured-image img{ width:100%; height:auto; display:block; }

.content{ color:var(--text); }

h1, h2, h3{ color:var(--text); }
h1{ font-size:clamp(1.6rem, 2vw + 1rem, 2.8rem); margin:0 0 .5rem; line-height:1.15; }
h2{ font-size:clamp(1.15rem, 1.4vw + .8rem, 1.75rem); margin:.75rem 0 .25rem; }
h3{ font-size:clamp(1rem, 1.2vw + .6rem,1.25rem); margin:.6rem 0; }

p{ margin:0 0 1rem; color:var(--text); }

ul{ padding-left:1.25rem; margin: .25rem 0 1rem; }
li{ margin:.25rem 0; }

blockquote{ margin:1rem 0; padding:.75rem 1rem; border-left:3px solid var(--accent); color:#d7e8ff; background:rgba(255,255,255,.04); border-radius:6px; }

a, button, .btn, .cta{ text-decoration:none; color:var(--text); }

a{ color:var(--accent-2); }
a:hover, a:focus{ text-decoration:underline; color:var(--accent); }

.btn{ display:inline-block; padding:.65rem 1rem; border-radius:8px; border:1px solid rgba(102,195,255,.8); background: rgba(102,195,255,.92); color:#04131a; font-weight:600; cursor:pointer; transition:transform .15s ease, background .2s ease; }
.btn:hover{ transform:translateY(-1px); background: rgba(120,205,255,.98); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.btn--outline{ background:transparent; color:var(--text); border:1px solid rgba(102,195,255,.8); }

.cta{ display:inline-block; padding:.65rem 1rem; border-radius:8px; border:1px solid rgba(102,195,255,.8); background: rgba(102,195,255,.9); color:#04131a; font-weight:600; }

.product-ad{ padding:1rem; border-radius:12px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); display:block; }
.product-ad h3{ margin:.25rem 0 .5rem; font-size:1rem; }
.product-ad a{ display:inline-block; padding:.5rem .75rem; border-radius:6px; background: rgba(102,195,255,.6); color:#04131d; text-decoration:none; }
.product-ad a:hover{ text-decoration:underline; }

footer{ padding:2rem 1rem; text-align:center; }
footer p{ color:var(--muted); margin:0.5rem 0 0; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
@media print{
  body{ background:white; color:black; }
  a{ text-decoration:underline; }
}