/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0a0a0f;
  --bg-surface: #12121a;
  --bg-card: #1a1a24;
  --text: #e8e6e3;
  --text-muted: #9a9a9a;
  --accent: #654ff0;
  --accent-hover: #7b69f5;
  --border: #2a2a36;
  --code-bg: #1e1e2a;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
}

/* Nav */
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.nav-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;
}

.logo:hover {
  color: var(--text);
}

.logo-icon {
  border-radius: 4px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--text);
}

.github-link {
  display: flex;
  align-items: center;
}

/* Hero */
.hero {
  padding: 8rem 1.5rem 5rem;
  text-align: center;
}

.hero-container {
  max-width: 700px;
  margin: 0 auto;
}

.hero-logo {
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.hero-tagline {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.hero-sub {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--accent);
  color: white;
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: white;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--border);
  color: var(--text);
}

/* Sections */
.section-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.features,
.examples,
.languages,
.getting-started,
.abi-features,
.ecosystem {
  padding: 5rem 0;
}

.features {
  background: var(--bg-surface);
}

.abi-features {
  background: var(--bg-surface);
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-align: center;
}

.section-intro {
  text-align: center;
  color: var(--text-muted);
  max-width: 650px;
  margin: 0 auto 3rem;
}

/* Feature cards */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.feature-group h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.feature-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Examples grid */
.examples-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.example-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
}

.example-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.example-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Language support */
.lang-tier {
  margin-bottom: 3rem;
}

.lang-tier h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.tier-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  max-width: 760px;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.tier-note--after {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.lang-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
}

.lang-card--featured {
  border-color: var(--accent);
}

.lang-card--muted {
  background: transparent;
  border-style: dashed;
}

.lang-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.lang-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.lang-head h4 {
  margin-bottom: 0;
}

/* Language mark. Sized by height so square icons and wide wordmarks (pygame)
   sit on the same optical baseline instead of being forced into one box. */
.lang-mark {
  height: 26px;
  width: auto;
  max-width: 84px;
  flex-shrink: 0;
  display: block;
}

.lang-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.lang-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.15em 0.6em;
  white-space: nowrap;
}

.lang-badge--ok {
  color: var(--text-muted);
  border-color: var(--border);
}

.lang-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.lang-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.78rem;
}

.lang-note {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 1.5rem;
}

.lang-note h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.lang-note p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.lang-note strong {
  color: var(--text);
  font-weight: 600;
}

/* Ecosystem */
.repo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.repo-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  color: inherit;
  transition: border-color 0.15s ease;
}

.repo-card:hover {
  border-color: var(--accent);
  color: inherit;
}

.repo-card h4 {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.repo-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.repo-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.repo-all {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
}

/* Getting started */
.steps {
  max-width: 700px;
  margin: 0 auto;
}

.step {
  margin-bottom: 2.5rem;
}

.step h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--accent);
}

.step p {
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* ABI grid */
.abi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.abi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
}

.abi-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.abi-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-right {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.25rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .examples-grid {
    grid-template-columns: 1fr 1fr;
  }

  .abi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lang-grid {
    grid-template-columns: 1fr;
  }

  .repo-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-container {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .nav-links a:not(.github-link) {
    display: none;
  }
}

@media (max-width: 480px) {
  .examples-grid {
    grid-template-columns: 1fr;
  }

  .abi-grid {
    grid-template-columns: 1fr;
  }

  .repo-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
}

/* ---- Per-language pages ---- */

/* Language hero — same treatment as the home page: accent wash, art beside
   the copy. The old version was a centered stack on a flat background and
   read as a different site. */
.lang-hero {
  padding: 4rem 0 3rem;
  background:
    radial-gradient(900px 380px at 22% 0%, rgba(101, 79, 240, 0.13), transparent 70%),
    var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.lang-hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 300px);
  align-items: center;
  gap: 3rem;
}

.lang-hero h1 {
  font-size: 2.75rem;
  margin-bottom: 0.5rem;
}

.lang-hero .hero-actions {
  justify-content: flex-start;
  margin-bottom: 1.25rem;
}

.lang-hero .lang-badges {
  margin: 0;
  justify-content: flex-start;
}

/* Kept: the C/C++ page pairs two marks inline in its body copy. */
.lang-hero-mark {
  height: 72px;
  width: auto;
  max-width: 220px;
}

/* ── Cartridge holding the language mark ────────────────────────────── */

.lang-cart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 260px;
  margin-left: auto;
  padding: 1rem 1rem 0.85rem;
  border: 1px solid #4a4a60;
  border-radius: 16px;
  background: linear-gradient(160deg, #3a3a4c 0%, #2a2a38 55%, #20202c 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(-4deg);
}

/* ridged grip along the top */
.lang-cart-grip {
  width: 82%;
  height: 14px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.07) 0 3px,
    transparent 3px 6px
  );
}

.lang-cart-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 152px;
  padding: 1.5rem 1rem;
  border: 1px solid #8f7ffb;
  border-radius: 10px;
  background: linear-gradient(150deg, #7b69f5 0%, #654ff0 60%, #4b39c4 100%);
}

.lang-cart-mark {
  height: 72px;
  width: auto;
  max-width: 96px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.lang-cart-pins {
  display: flex;
  gap: 6px;
  justify-content: center;
  width: 82%;
  padding: 5px 8px;
  border-radius: 4px;
  background: #15151e;
}

.lang-cart-pins i {
  flex: 1 1 auto;
  height: 16px;
  border-radius: 1.5px;
  background: linear-gradient(to bottom, #e6c76a, #b8933c);
}

.lang-page {
  padding-top: 3rem;
  padding-bottom: 4rem;
  max-width: 820px;
}

.lang-page h2 {
  text-align: left;
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
}

.lang-page h2:first-child {
  margin-top: 0;
}

.lang-page > p {
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.lang-page pre {
  margin-bottom: 1rem;
}

/* Facts grid: same card treatment as the feature grid, but self-contained
   so a language page can stand alone without the features section. */
.lang-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}

.lang-back {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.lang-back a {
  color: var(--text-muted);
  text-decoration: none;
}

.lang-back a:hover {
  color: var(--accent);
}

.lang-title-link {
  color: inherit;
  text-decoration: none;
}

.lang-title-link:hover {
  color: var(--accent);
}

/* Two links per card: the guide leads, the repo follows. */
.lang-link--primary {
  color: var(--accent);
  font-weight: 500;
  margin-right: 1rem;
}

/* Trademark and logo attribution. Deliberately quiet: it is a legal note,
   not content, but it has to be present and readable. */
.footer-legal {
  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding: 1.25rem 2rem 0;
  border-top: 1px solid var(--border);
}

.footer-legal p {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
  opacity: 0.75;
}

.footer-legal a {
  color: inherit;
  text-decoration: underline;
}

/* Card call-to-action. One destination per card: the language's own page,
   which is where the GitHub link and the getting-started steps live. */
.lang-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-cta:hover {
  background: var(--accent);
  color: #fff;
}

.lang-cta span {
  transition: transform 0.15s ease;
}

.lang-cta:hover span {
  transform: translateX(2px);
}

/* GitHub mark inside a button */
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-gh {
  flex-shrink: 0;
}

/* Inline GitHub link inside a guide step */
.repo-line {
  margin-bottom: 1rem !important;
}

.gh-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.9em;
}

.gh-link:hover {
  text-decoration: underline;
}

.gh-inline {
  flex-shrink: 0;
}

/* Two marks in one hero, for the page C and C++ share */
.lang-hero-pair {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

/* Registry badges. Hotlinked from shields.io so the version tracks the
   registry rather than going stale on the next publish. Width and height are
   set so the row does not reflow if the request is slow or blocked. */
.lang-badges {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.25rem;
  min-height: 20px;
}

.lang-badges img {
  display: block;
  height: 20px;
  width: auto;
}

/* ── Hero: art beside copy ──────────────────────────────────────────── */

.hero:has(.hero-container--split) {
  padding: 4.5rem 1.5rem 2rem;
}

.hero-container--split {
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px);
  align-items: center;
  gap: 3rem;
  text-align: left;
}

.hero-container--split .hero-actions {
  justify-content: flex-start;
}

.hero-art img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── One cart, every host ───────────────────────────────────────────── */

.everywhere {
  padding: 0 1.5rem 0.5rem;
}

.everywhere-art {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}

/* ── Band divider (cartridge pin strip) ─────────────────────────────── */

.band-divider {
  display: block;
  width: 100%;
  height: 48px;
  margin: 1rem 0;
}

/* ── Audience bands ─────────────────────────────────────────────────── */

.band {
  padding: 4rem 1.5rem;
}

/* The nav is fixed, so an anchor jump lands with the section heading tucked
   underneath it unless every target reserves the nav's height. */
.band,
.languages,
.getting-started,
.abi-features {
  scroll-margin-top: 5rem;
}

/* The player band gets a lighter surface so the two audiences read as
   physically different areas of the page, not just different headings. */
.band--play {
  background:
    radial-gradient(1000px 400px at 50% 0%, rgba(101, 79, 240, 0.10), transparent 70%),
    var(--bg-surface);
  border-block: 1px solid var(--border);
}

.band-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

/* ── Host/device glyphs ─────────────────────────────────────────────── */

.hicon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  flex: 0 0 auto;
}

/* ── Players ────────────────────────────────────────────────────────── */

.play-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0 3rem;
}

.play-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
}

.play-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.85rem 0 0.5rem;
}

.play-card p {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.play-get {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.play-get h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.play-get > .play-get-col > p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.cart-list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.cart-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.cart-list a {
  font-weight: 600;
}

.cart-list span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.player-opt {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
}

.player-opt:first-of-type {
  border-top: none;
  padding-top: 0;
}

.player-opt h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.player-opt p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.play-pre {
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ── Developers ─────────────────────────────────────────────────────── */

.make-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.make-grid .feature-card {
  margin-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero-container--split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .hero-container--split .hero-actions {
    justify-content: center;
  }

  /* Art below the copy on narrow screens, and smaller: it is decoration,
     not the message. */
  .hero-art {
    order: 2;
    max-width: 340px;
    margin: 0 auto;
  }

  .play-grid,
  .make-grid {
    grid-template-columns: 1fr 1fr;
  }

  .play-get {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 620px) {
  .play-grid,
  .make-grid {
    grid-template-columns: 1fr;
  }

  .band {
    padding: 3rem 1.25rem;
  }

  .band-divider {
    height: 32px;
  }
}

/* Input glyph strip (Kenney, CC0 — credited in the footer). The source art is
   solid white, so it is dimmed rather than recoloured. */
.input-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.input-strip li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.input-strip img {
  opacity: 0.55;
}

.input-strip span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Language hero: stack on narrow screens, art under the copy and smaller —
   it is decoration, not the message. */
@media (max-width: 860px) {
  .lang-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .lang-hero .hero-actions,
  .lang-hero .lang-badges {
    justify-content: center;
  }

  .lang-hero-art {
    order: 2;
  }

  .lang-cart {
    max-width: 200px;
    margin-inline: auto;
  }

  .lang-cart-label {
    min-height: 100px;
  }

  .lang-cart-mark {
    height: 56px;
  }
}