:root {
  --bg: #0a0a0a;
  --text: #f0f0f0;
  --muted: #888;
  --border: #1e1e1e;
  --gold: #ffd700;
  --gold-dark: #b8860b;
  --nav-height: 64px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:system-ui, sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; }
a { color:inherit; }
.site-nav { position:sticky; top:0; z-index:100; background:rgba(10,10,10,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:1100px; margin:0 auto; min-height:var(--nav-height); padding:0 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.brand { font-size:1.05rem; font-weight:700; letter-spacing:0.06em; text-decoration:none; color:#fff; }
.brand span { color:var(--gold); }
.nav-links { display:flex; flex-wrap:wrap; gap:1.25rem; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:0.88rem; font-weight:500; letter-spacing:0.04em; padding:0.35rem 0; transition:color 0.15s; }
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.site-main { flex:1; }
.hero { position:relative; width:100%; min-height:calc(100vh - var(--nav-height)); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-overlay { position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem; }
.hero-overlay .logo { width:280px; max-width:70vw; filter:brightness(0) invert(1); margin-bottom:0.6rem; }
.hero-overlay h1 { font-size:1.4rem; font-weight:500; color:#ccc; letter-spacing:0.05em; margin-bottom:1.2rem; }
.cta { background:linear-gradient(135deg, #ffd700, #b8860b); color:#0a0a0a; font-weight:700; padding:0.7rem 2rem; border-radius:999px; text-decoration:none; font-size:0.95rem; letter-spacing:0.03em; transition:transform 0.15s, box-shadow 0.15s; box-shadow:0 4px 20px rgba(255,215,0,0.3); }
.cta:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(255,215,0,0.45); }
.section { padding:4rem 2rem; text-align:center; min-height:40vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.section h2 { font-size:2rem; font-weight:700; margin-bottom:0.5rem; }
.section p { color:var(--muted); max-width:560px; }
.page { min-height:calc(100vh - var(--nav-height) - 96px); padding:4rem 2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.page .logo { width:180px; max-width:60vw; filter:brightness(0) invert(1); margin-bottom:1.2rem; }
.page h1 { font-size:2rem; font-weight:700; margin-bottom:1rem; }
.page p { color:var(--muted); max-width:560px; line-height:1.6; }
.page .placeholder { margin-top:1.5rem; color:#555; font-size:0.9rem; font-style:italic; }
.back { display:inline-block; margin-top:2rem; color:var(--gold); text-decoration:none; font-size:0.9rem; letter-spacing:0.03em; }
.back:hover { text-decoration:underline; }
.footer { padding:2rem; text-align:center; border-top:1px solid var(--border); }
.footer a { color:var(--muted); text-decoration:none; margin:0 1.2rem; font-size:0.85rem; letter-spacing:0.04em; transition:color 0.15s; }
.footer a:hover { color:var(--gold); }
.blog-hero, .article-hero { max-width:1100px; margin:0 auto; padding:4rem 2rem 2rem; text-align:center; }
.blog-hero h1, .article-hero h1 { font-size:2.6rem; font-weight:700; margin-bottom:0.75rem; }
.subtitle { color:var(--muted); max-width:720px; margin:0 auto; line-height:1.6; }
.article-hero .meta { margin:0.75rem 0 1rem; }
.article-hero .tags { justify-content:center; }
.badge { display:inline-flex; align-items:center; gap:0.35rem; background:linear-gradient(135deg, #ffd700, #b8860b); color:#0a0a0a; font-weight:800; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; padding:0.35rem 0.7rem; border-radius:999px; margin-bottom:1rem; box-shadow:0 4px 18px rgba(255,215,0,0.22); }
.disclaimer { max-width:820px; margin:1.5rem auto 0; padding:0.9rem 1.1rem; border:1px solid rgba(255,215,0,0.35); border-radius:14px; background:rgba(255,215,0,0.06); color:#e6d5a8; font-size:0.92rem; line-height:1.5; }
.post-grid { max-width:1100px; margin:0 auto; padding:1rem 2rem 4rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1.5rem; }
.post-card { display:flex; flex-direction:column; gap:0.85rem; padding:1.5rem; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); transition:transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.post-card:hover { transform:translateY(-3px); border-color:rgba(255,215,0,0.35); box-shadow:0 12px 34px rgba(0,0,0,0.35); }
.post-card h2 { font-size:1.25rem; line-height:1.3; color:#fff; }
.meta { color:var(--muted); font-size:0.82rem; letter-spacing:0.03em; }
.tags { display:flex; flex-wrap:wrap; gap:0.45rem; }
.tag { color:#d7c78e; background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.18); border-radius:999px; padding:0.25rem 0.6rem; font-size:0.72rem; letter-spacing:0.04em; }
.excerpt { color:#aaa; line-height:1.6; }
.read-link { margin-top:auto; color:var(--gold); text-decoration:none; font-weight:700; font-size:0.9rem; }
.read-link:hover { text-decoration:underline; }
.article { max-width:760px; margin:0 auto; padding:0 2rem 4rem; }
.article-body { font-size:1.05rem; line-height:1.75; color:#d8d8d8; }
.article-body h2 { margin:2.25rem 0 0.85rem; font-size:1.5rem; color:#fff; }
.article-body h3 { margin:1.75rem 0 0.65rem; font-size:1.15rem; color:#fff; }
.article-body p { margin:0 0 1.15rem; }
.article-body ul, .article-body ol { margin:0 0 1.25rem 1.35rem; }
.article-body li { margin:0.35rem 0; }
.article-body blockquote { margin:1.5rem 0; padding:1rem 1.2rem; border-left:3px solid var(--gold); background:rgba(255,215,0,0.05); color:#e8d9a8; }
.article-body table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:0.92rem; }
.article-body th, .article-body td { border:1px solid var(--border); padding:0.65rem 0.75rem; text-align:left; }
.article-body th { color:var(--gold); background:rgba(255,215,0,0.05); }
.article-body .callout { margin:1.5rem 0; padding:1rem 1.2rem; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid var(--border); }
.article-footer { max-width:760px; margin:0 auto; padding:0 2rem 4rem; }
@media (max-width:720px) {
  .nav-inner { padding:0 1rem; }
  .brand { font-size:0.95rem; }
  .nav-links { gap:0.9rem; }
  .nav-links a { font-size:0.8rem; }
  .blog-hero, .article-hero { padding-top:3rem; }
  .blog-hero h1, .article-hero h1 { font-size:2rem; }
  .post-grid { padding:1rem; }
  .article, .article-footer { padding:0 1rem 3rem; }
  .footer a { margin:0 0.65rem; }
}