:root {
  --hz-bg: #0B0F0D;
  --hz-void: #050807;
  --hz-ink: #0E1311;
  --hz-struct: #2A332F;
  --hz-muted: #C7CECB;
  --hz-text: #F4F6F5;

  --hz-signal: #00E65C;
  --hz-signal-dim: #00B848;

  --hz-gold: #FFD700;

  --radius: 18px;
  --pad: 24px;
  --max: 1080px;

  --grid: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27104%27%20viewBox%3D%270%200%20120%20104%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%25232A332F%27%20stroke-width%3D%271%27%20opacity%3D%270.35%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M30%202%20L60%202%20L75%2028%20L60%2054%20L30%2054%20L15%2028%20Z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M90%202%20L120%202%20L135%2028%20L120%2054%20L90%2054%20L75%2028%20Z%27%20transform%3D%27translate%28-15%2C0%29%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M60%2054%20L90%2054%20L105%2080%20L90%20106%20L60%20106%20L45%2080%20Z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M0%2054%20L30%2054%20L45%2080%20L30%20106%20L0%20106%20L-15%2080%20Z%27%20transform%3D%27translate%2815%2C0%29%27/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  /* keep a flat fallback so text stays readable while things load */
  background: var(--hz-bg);
  color: var(--hz-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
  position: relative;
}

/* Static, viewport-anchored background gradients (iOS-safe) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;          /* behind everything */
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 70% 20%, rgba(0,230,92,0.10), transparent 55%),
    radial-gradient(900px 600px at 10% 80%, rgba(255,215,0,0.06), transparent 55%),
    linear-gradient(180deg, var(--hz-void), var(--hz-bg));
}
.background-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--grid);
  background-size: 120px 104px;
  background-position: 12px 10px;
  opacity: 0.10;
  mix-blend-mode: screen;
  z-index: -1; /* above gradients, below content */
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(1200px 700px at 50% 50%, transparent 30%, rgba(0,0,0,0.65) 100%);
  z-index: -1; /* above gradients, below content */
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: min(var(--max), calc(100% - 2*var(--pad)));
  margin: 0 auto;
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(11,15,13,0.65);
  border-bottom: 1px solid rgba(42,51,47,0.45);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.brand img {
  width: 34px;
  height: 34px;
  opacity: 0.92;
}

.brand .wordmark {
  font-family: Orbitron, Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--hz-muted);
}

.signal-rail {
  height: 3px;
  width: 120px;
  border-radius: 999px;
  background: var(--hz-signal);
  box-shadow: 0 0 18px rgba(0,230,92,0.25);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 18px;
  padding: 0;
  margin: 0;
  align-items: center;
}

nav a {
  font-size: 14px;
  color: var(--hz-muted);
  padding: 10px 10px;
  border-radius: 12px;
}
nav a[aria-current="page"] {
  color: var(--hz-text);
  background: rgba(42,51,47,0.35);
  text-decoration: none;
}

.menu {
  display: none;
  border: 1px solid rgba(42,51,47,0.6);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(5,8,7,0.4);
  color: var(--hz-text);
}

main {
  padding: 48px 0 70px;
}

.hero {
  padding: 56px 0 34px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hz-muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.kicker .dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--hz-signal);
  box-shadow: 0 0 14px rgba(0,230,92,0.22);
}

h1 {
  font-family: Orbitron, Inter, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
}

p.lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 18px;
  color: rgba(244,246,245,0.92);
}

.panel {
  margin-top: 26px;
  border: 1px solid rgba(42,51,47,0.6);
  border-radius: var(--radius);
  background: rgba(5,8,7,0.35);
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  overflow: hidden;
}

.panel-inner {
  padding: 22px 22px;
}

.grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}
@media (max-width: 880px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  border: 1px solid rgba(42,51,47,0.55);
  border-radius: 16px;
  padding: 18px;
  background: rgba(11,15,13,0.35);
}

h2 {
  font-family: Orbitron, Inter, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--hz-text);
}

.small {
  color: var(--hz-muted);
  font-size: 14px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(42,51,47,0.7);
  background: rgba(11,15,13,0.35);
  color: var(--hz-text);
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
}
.btn:hover {
  text-decoration: none;
  border-color: rgba(0,230,92,0.55);
}
.btn--signal {
  border-color: rgba(0,230,92,0.65);
}
.btn--gold {
  border-color: rgba(255,215,0,0.55);
}

.rule {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
}
.rule .mark {
  margin-top: 6px;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(199,206,203,0.85);
}
.rule.signal .mark {
  background: var(--hz-signal);
}

footer {
  border-top: 1px solid rgba(42,51,47,0.45);
  padding: 22px 0 34px;
  color: var(--hz-muted);
  font-size: 14px;
}
footer .foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: rgba(199,206,203,0.95);
}

@media (max-width: 760px) {
  nav ul { display: none; position: absolute; right: var(--pad); top: 62px; flex-direction: column; background: rgba(11,15,13,0.9); border: 1px solid rgba(42,51,47,0.6); padding: 10px; border-radius: 14px; }
  nav ul.open { display: flex; }
  .menu { display: inline-flex; }
}

/* Status module */
.status { display: grid; gap: 10px; }
.status-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pill { display:inline-flex; padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-family: Orbitron, Inter, system-ui; letter-spacing: .08em; font-size:12px; }
.status-head { font-family: Orbitron, Inter, system-ui; font-size:22px; }

/* Signal feed */
.feed-item { padding: 12px 0; border-top: 1px solid var(--line); }
.feed-item:first-child { border-top: 0; padding-top: 0; }
.feed-meta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.feed-text { margin-top: 6px; font-size: 16px; }


/* Chronicle stream */
.breadcrumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  color: rgba(199,206,203,0.95);
  font-size: 14px;
}
.breadcrumbs .sep { opacity: 0.55; }
.inline-link { text-decoration: underline; text-underline-offset: 3px; }
.subtle { color: rgba(199,206,203,0.95); }

.chron-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.chronicle { margin-top: 14px; }
.chron-entry {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.chron-entry:first-child { border-top: 0; padding-top: 0; }
.chron-stamp .stamp {
  font-family: Orbitron, Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  font-size: 12px;
  color: rgba(244,246,245,0.92);
}
.chron-stamp .stamp-sub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(199,206,203,0.85);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.chron-title {
  font-family: Orbitron, Inter, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 18px;
  margin: 0;
}
.chron-body p { margin: 8px 0 0; }

.spacer { height: 10px; }

@media (max-width: 760px) {
  .chron-entry { grid-template-columns: 1fr; gap: 8px; }
  .chron-stamp { display:flex; gap:12px; align-items:baseline; }
  .chron-stamp .stamp-sub { margin-top: 0; }
}