:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.7 ui-sans-serif, system-ui; background: #050505; color: #fff; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid #1f1f1f; position: sticky; top: 0; background: rgba(5,5,5,.9); backdrop-filter: blur(6px); }
.nav nav a { color: #d3d3ff; text-decoration: none; margin-right: 12px; }
.page { max-width: 1080px; margin: 0 auto; padding: 44px 24px; }
.hero h1, h1 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.07; margin: 0 0 12px; }
.eyebrow { color: #9f92ff; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.hero-links { display: flex; gap: 12px; margin-top: 16px; }
.hero-links a { color: #fff; border: 1px solid #353535; padding: 8px 12px; border-radius: 10px; text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.grid article { border: 1px solid #202020; border-radius: 12px; padding: 14px; background: #090909; }
.footer { border-top: 1px solid #1f1f1f; padding: 24px; color: #8a8a8a; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } .nav { flex-wrap: wrap; } }