/* ══════════════════════════════════════════════
   Design System: Neon Observatory
   Shared across all pages. Page-specific styles
   stay inline in each HTML file.

   Note: .container max-width defaults to 1200px.
   Pages that want a narrower max-width override
   .container in their local <style> block.
   ══════════════════════════════════════════════ */
:root {
  --bg: #12121f;
  --surface: #12121f;
  --surface-lowest: #0d0d1a;
  --surface-low: #1a1a28;
  --surface-container: #1e1e2c;
  --surface-high: #292937;
  --surface-highest: #343342;
  --surface-bright: #383847;
  --on-surface: #e3e0f4;
  --on-surface-variant: #e2bebf;
  --on-bg: #e3e0f4;
  --primary: #ffb2b7;
  --primary-container: #fc536d;
  --on-primary: #67001c;
  --on-primary-container: #5b0017;
  --secondary: #41deb0;
  --secondary-container: #00c295;
  --on-secondary: #003829;
  --tertiary: #c6c6c6;
  --outline-variant: #5a4042;
  --outline: #a9898a;
  --error: #ffb4ab;
  --tier-foundations: #5b8def;
  --tier-foundations-bg: rgba(15, 52, 96, 0.15);
  --tier-alignment: #c78ddb;
  --tier-alignment-bg: rgba(155, 89, 182, 0.15);
  --tier-systems: #41deb0;
  --tier-systems-bg: rgba(65, 222, 176, 0.1);
  --tier-agents: #e97d32;
  --tier-agents-bg: rgba(233, 125, 50, 0.15);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--on-bg);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; font-family: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(255, 178, 183, 0.3); }

/* ── Utilities ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.ghost-border { border: 1px solid rgba(90, 64, 66, 0.15); }
.font-headline { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ── Nav ── */
.nav {
  position: fixed; top: 0; width: 100%; z-index: 50;
  background: rgba(18, 18, 31, 0.75);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.nav-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem; max-width: 1200px; margin: 0 auto;
}
.nav-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.05em; color: var(--on-surface);
}
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.875rem;
  color: rgba(226, 190, 191, 0.5); transition: color 0.3s;
  letter-spacing: -0.02em;
}
.nav-links a:hover, .nav-links a.current { color: var(--on-surface); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary-container); padding: 0.5rem 1.5rem;
  border-radius: 9999px; font-weight: 700; font-size: 0.875rem;
  transition: transform 0.2s;
  box-shadow: 0 0 30px rgba(252, 83, 109, 0.15);
}
.nav-cta:hover { transform: scale(1.05); }

/* ── Sections ── */
.section { padding: 6rem 0; position: relative; z-index: 1; }
.section-low { background: var(--surface-low); }
.section-lowest { background: var(--surface-lowest); }

/* ── Footer ── */
.footer { background: var(--surface-lowest); padding: 3rem 2rem; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1200px; margin: 0 auto; flex-wrap: wrap; gap: 1.5rem;
}
.footer-logo {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.125rem;
  font-weight: 700; color: var(--on-surface); letter-spacing: -0.03em;
}
.footer-links { display: flex; gap: 2rem; }
.footer-links a {
  font-size: 0.8125rem; color: rgba(226, 190, 191, 0.4); transition: color 0.3s;
}
.footer-links a:hover { color: var(--secondary); }
.footer-copy {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem;
  color: rgba(226, 190, 191, 0.25);
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pfloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50% { transform: translateY(-20px) scale(1.15); opacity: 1; }
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.3; }
}
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive (shared) ── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}