:root {
  --bg-color: #0f172a;        /* deep slate / ChatGPT-like */
  --panel-color: #020617;
  --text-color: #e5e7eb;
  --muted-color: #9ca3af;
  --accent-color: #38bdf8;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";

  background: linear-gradient(
    180deg,
    var(--bg-color),
    var(--panel-color)
  );

  color: var(--text-color);
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 720px;
  padding: 4rem 2rem;
  margin: auto;
}

h1 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.tagline {
  color: var(--muted-color);
  margin-bottom: 2.5rem;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
}

.content p {
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.subtle {
  color: var(--muted-color);
  font-style: italic;
}

footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--muted-color);
}