:root {
  --bg: #0b0f14;
  --bg-2: #0f141b;
  --text: #e8f3ff;
  --muted: #b9c7d9;
  --brand: #c0392b;
  --brand-2: #f39c12;
  --link: #7fc7ff;
  --maxw: 1100px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
header { background: linear-gradient(180deg, rgba(42,161,152,0.08), rgba(42,161,152,0)); border-bottom: 1px solid rgba(255,255,255,0.06); position: sticky; top:0; backdrop-filter: blur(6px); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1rem; }
nav { display:flex; gap:1rem; flex-wrap: wrap; align-items:center; }
nav a { padding:.5rem .75rem; border-radius:.66rem; }
nav a[aria-current="page"] { background: rgba(42,161,152,0.15); }
h1 { font-size: clamp(1.8rem, 2.2vw + 1rem, 2.6rem); margin:.8rem 0; }
.lead { color: var(--muted); max-width: 70ch; }
footer { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 3rem; }
.grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--bg-2); border: 1px solid rgba(255,255,255,0.06); border-radius: 1rem; padding: 1rem; }
.hero { display:grid; align-items:center; min-height: 46vh; background: radial-gradient(1200px 600px at 10% -10%, rgba(42,161,152,0.15), transparent), radial-gradient(1200px 600px at 100% 10%, rgba(208,177,74,0.10), transparent); border-bottom: 1px solid rgba(255,255,255,0.06); }
.hero img { width:100%; height:auto; border-radius: .75rem; border: 1px solid rgba(255,255,255,0.06); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }