:root {
  --bg: #070a12;
  --panel: rgba(20, 24, 40, 0.9);
  --line: rgba(167, 139, 250, 0.35);
  --text: #edf1ff;
  --soft: #b9c1df;
  --violet: #a78bfa;
  --teal: #55d6d1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--text);
  background:
    radial-gradient(860px 340px at 12% -8%, rgba(167, 139, 250, 0.2), transparent 64%),
    radial-gradient(940px 420px at 94% 108%, rgba(85, 214, 209, 0.16), transparent 62%),
    var(--bg);
}

.wrap {
  width: min(980px, calc(100% - 1.2rem));
  margin: 1rem auto;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 1rem;
}

h1, h2 {
  margin-top: 0;
  font-family: "Cinzel", "Times New Roman", serif;
  letter-spacing: 0.05em;
}

p, li {
  color: var(--soft);
  line-height: 1.6;
}

.nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.nav a {
  text-decoration: none;
  color: var(--soft);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.64rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav a:hover,
.nav a:focus-visible {
  color: #f6f8ff;
  border-color: var(--teal);
}

.cta {
  display: inline-block;
  text-decoration: none;
  border: 1px solid rgba(85, 214, 209, 0.45);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(85, 214, 209, 0.12);
}

.cta:hover,
.cta:focus-visible {
  border-color: var(--violet);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}