/* Base */
:root{
  --bg: #0b1f12;
  --bg-2: #1e2f22;
  --text: #e6f6ef;
  --muted: #a6c9ad;
  --accent: #0b58ff;
  --accent-2: #1a8dff;
  --card: rgba(12, 40, 28, 0.28);
  --glass: rgba(12, 40, 28, 0.22);
  --border: rgba(120, 210, 170, 0.4);
  --shadow: 0 6px 20px rgba(0,0,0,.25);
  --radius: 12px;
  --radius-sm: 8px;
}
*{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;-webkit-font-smoothing:antialiased}
body{
  margin:0;
  color:var(--text);
  /* Layered background: gradient + subtle scanlines + soft glow */
  background-image:
    linear-gradient(135deg, rgba(14,34,22,.92), rgba(14,40,26,.92) 60%, rgba(6,20,12,.92)),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.04) 0 1px, transparent 1px 2px),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.04), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(0,0,0,.04), transparent 40%);
  background-blend-mode: normal, overlay, overlay, normal;
  min-height:100%;
  line-height:1.5;
  padding:0;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid #fff; outline-offset:2px}
button{font-family:inherit}
img{max-width:100%; display:block}
ul{margin:0 0 0 1.25rem; padding:0}
li{margin:.25rem 0}

/* Layout primitives */
header, main, footer, aside{ display:block }
.container{ max-width: clamp(320px, 90vw, 1100px); margin-inline:auto; padding-inline:1rem; }

/* Header */
header{ padding:1.25rem 1rem 0.75rem; }
header h1{ font-size:clamp(1.6rem, 2.2vw + 1rem, 2.75rem); line-height:1.1; margin:.25rem 0 .25rem; color:var(--text) }
header .meta{ color:var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.9rem; }

nav{ margin-top:.5rem }
nav a{ display:inline-block; padding:.35rem .6rem; border-radius:6px; border:1px solid rgba(27,120,255,.45); color:#d6ebff; background: rgba(11,88,255,.14) }
nav a:hover{ background: rgba(11,88,255,.24) }

/* Main content */
main{ padding:1rem 0 2rem; }
.image-frame{ width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.25); box-shadow:0 8px 28px rgba(0,0,0,.25); background:#000; display:block; }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s ease; }
.image-frame:hover img{ transform: scale(1.03) }

h2{ font-size: clamp(1.25rem, 1.5vw + 1rem, 1.9rem); margin:.75rem 0; color:var(--text) }
p{ color:var(--muted); margin:.6rem 0 1rem }
blockquote{ margin:.75rem 0; padding-left:1rem; border-left:3px solid var(--accent); color:var(--text); opacity:.95; }
.section{ margin: .5rem 0 1rem; }

/* Glass panels (baseline + fallback) */
.glass, .card, .content, .product-ad{ 
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: .95rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(12px)) {
  .glass, .card, .content, .product-ad{ background: rgba(8, 26, 16, 0.9); }
}
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }

/* Content blocks */
.content{ padding:1rem; }
.content h2{ margin-top:0.25rem }

ul{ list-style: disc inside; }

/* Product ad / footer blocks */
.product-ad{ display:block; text-align:center; padding: .75rem; }
.product-ad a{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem 1rem; border-radius:8px; }
.product-ad a p{ margin:.0; font-weight:600; }

/* Buttons & links (solid + outline variants) */
.btn, .cta, .outline{ font-family: inherit; font-weight:600; border-radius:8px; padding:.65rem .95rem; border:1px solid rgba(255,255,255,.5); color:#fff; text-decoration:none; display:inline-block; transition: transform .2s ease, background .2s ease, border-color .2s ease }
.btn{ background: linear-gradient(to bottom, #0b58ff 0%, #0a4bd2 100%); }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

.outline{ background: transparent; border:1px solid rgba(11,88,255,.8); color: var(--accent) }
.outline:hover{ background: rgba(11,88,255,.08); }

.cta{ background: linear-gradient(to bottom, rgba(26,141,255,.95), rgba(11,88,255,.85)); }
.cta:hover{ filter: brightness(1.05); }

a, button, .btn, .cta{ text-shadow: 0 1px 0 rgba(0,0,0,.25) }

/* Typography helpers for readability on glass */
h1, h2, h3{ text-wrap: pretty; }
p{ line-height:1.6; }

/* Utility / layout helpers */
.container{ max-width: clamp(320px, 92vw, 1100px); padding-inline:1rem; margin-inline:auto; }
.grid-center{ display:grid; justify-items:center; align-items:start; }

/* Footer */
footer{ padding:1rem; display:block; border-top:1px solid rgba(255,255,255,.08); margin-top:1rem; }

/* Print styles (basic readability) */
@media print{
  body{ background:#fff; color:#000; }
  a{ color:#000; text-decoration: none; }
  header, nav, .glass, .card{ background: #fff; border:1px solid #ddd; }
}

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