:root {
  --igm-red: #e30613;
  --bg: #111214;
  --surface: #1a1c1f;
  --text: #f5f5f5;
  --muted: #a3a8b3;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #60a5fa;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Inter", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topnav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 0.65rem 1rem;
  background: rgba(17, 18, 20, 0.96); backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--igm-red);
}
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { height: 42px; width: auto; }
.brand-text strong { display: block; font-size: 0.95rem; font-weight: 700; }
.brand-text span { display: block; font-size: 0.68rem; font-weight: 500; color: var(--muted); letter-spacing: 0.03em; }
.nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.nav-links a {
  font-size: 0.72rem; font-weight: 600; color: var(--muted);
  padding: 0.35rem 0.65rem; border-radius: 999px; border: 1px solid var(--border); text-decoration: none;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); text-decoration: none; }
.nav-badge-live {
  padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(74, 222, 128, 0.12); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.35);
}
.hero {
  padding: 1.5rem 1rem 1rem;
  background: radial-gradient(ellipse 100% 80% at 50% -20%, rgba(227, 6, 19, 0.22) 0%, var(--bg) 65%);
}
.hero h1 { margin: 0 0 0.35rem; font-size: clamp(1.45rem, 5vw, 2rem); letter-spacing: -0.02em; }
.hero .sub { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 46rem; }
.author-credit { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--muted); }
.author-credit strong { color: #fff; font-weight: 700; }
.live-notice {
  margin-top: 0.75rem; padding: 0.65rem 0.85rem; border-radius: 10px;
  background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.28);
  color: #bfdbfe; font-size: 0.78rem; line-height: 1.5; max-width: 46rem;
}
.live-notice strong { color: #dbeafe; }
.disclaimer {
  margin-top: 0.85rem; padding: 0.65rem 0.85rem; border-radius: 10px;
  background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.28);
  color: #fde68a; font-size: 0.78rem; line-height: 1.5; max-width: 46rem;
}
.disclaimer strong { color: #fcd34d; }
.footer-note {
  text-align: center; font-size: 0.72rem; color: var(--muted);
  padding: 1.5rem 1rem 2rem; line-height: 1.6; background: var(--bg);
}
.footer-note a { color: #93c5fd; }
.footer-note strong { color: #fff; }
@media (max-width: 640px) { .nav-links { display: none; } }