:root {
  --void: #0b0f12;
  --ink: #101519;
  --carbon: #141a1f;
  --graphite: #1a2228;
  --line: #2b343c;
  --line-soft: #20282f;
  --paper: #f4f7f8;
  --fog: #9aa6af;
  --dim: #6f7c85;
  --signal: #b8ff5c;
  --signal-ink: #101805;
  --radius: 18px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --store: #ffb86b;
  --community: #9a8cff;
  --market: #63e6d6;
  --danger: #ff6e7a;
  --success: #86f7b3;
  --sans: Inter, "Segoe UI Variable", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 14% 4%, rgba(184, 255, 92, 0.09), transparent 28rem),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--void);
  background-size: auto, 36px 36px, 36px 36px, auto;
  background-attachment: fixed;
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(42, 52, 66, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 52, 66, .22) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 40;
  padding: .65rem 1rem;
  color: #0b0e13;
  background: var(--signal);
}
.skip:focus { top: 1rem; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 80px;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid rgba(42, 52, 66, .8);
  background: rgba(7, 9, 13, .88);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.brand img { width: 43px; height: 43px; }
.brand span { font-weight: 560; letter-spacing: .08em; }
.brand b { font-size: 1rem; letter-spacing: -.02em; }
.brand small {
  display: block;
  color: var(--signal);
  font: 700 .52rem var(--mono);
  letter-spacing: .19em;
}

.topbar nav { display: flex; gap: 1.7rem; }
.topbar nav a { color: var(--fog); text-decoration: none; font-size: .88rem; }
.topbar nav a:hover { color: var(--paper); }

.key {
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--fog);
  background: var(--carbon);
  cursor: pointer;
}
.key kbd {
  margin-left: .4rem;
  padding: .1rem .35rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--paper);
}

main { max-width: 1240px; margin: auto; }
.hero {
  display: grid;
  /* minmax(0, …) rather than a bare fr, and min-width: 0 on the child. A grid item defaults
     to min-width: auto, which is its min-content width, so one long unbreakable string --
     a German compound, a market hash name, a URL -- can force the track wider than the
     viewport and give the whole page a horizontal scrollbar. Measured in /en-XA/, where the
     expansion pseudo-locale pushed .hero-copy to 500px inside a 320px viewport. The rest of
     this stylesheet already uses this idiom in nine places; the hero was missed. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: 4rem;
  min-height: 720px;
  padding: 7rem 1.5rem 5rem;
}
.hero-copy { min-width: 0; }
.eyebrow, .kicker {
  color: var(--fog);
  font: 700 .72rem var(--mono);
  letter-spacing: .16em;
  /* Casing belongs here rather than in JavaScript. String.toUpperCase() is locale-blind:
     it mangles the Turkish dotted i and means nothing at all for Arabic, so translated
     text must never be upper-cased in code. */
  text-transform: uppercase;
}
.eyebrow i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: .6rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 15px var(--signal);
}
.hero h1 {
  margin: 1.1rem 0 1.6rem;
  font-size: clamp(3.2rem, 6vw, 6.25rem);
  line-height: .93;
  letter-spacing: -.065em;
}
.hero h1 em { color: var(--signal); font-style: normal; }
.lede { max-width: 760px; color: #b5becc; font-size: 1.13rem; }

.section { padding: 7rem 1.5rem; border-top: 1px solid var(--line); }
.section > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 3rem;
  margin-bottom: 2.7rem;
}
.section h2, .shortcut h2 {
  margin: .5rem 0;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.section header > p { max-width: 580px; color: var(--fog); }
.section-action { margin-top: 2rem; }

footer {
  display: grid;
  /* Same reason as .hero: a bare fr track takes its minimum from content, so expanded or
     long copy widens the page instead of wrapping. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  align-items: start;
  gap: 2rem;
  max-width: 1240px;
  margin: auto;
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--fog);
  font-size: .82rem;
}
footer .brand { color: var(--paper); }
footer p { margin-top: 0; }
footer i { font-style: normal; }
/* nowrap keeps the copyright line intact on desktop, where there is room for it. It is
   released at the narrow breakpoint in responsive.css, where holding it would push the page
   wider than the viewport. */
.footer-legal { text-align: right; white-space: nowrap; min-width: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: .7rem 1rem; min-width: 0; }
.legal-links a { color: var(--signal); }

/* Language selector. Plain links, so it works with scripting off and needs no state. The
   current language is marked by weight and an underline as well as colour, so the marker
   survives a display that renders the accent colour poorly. */
.locale-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line-soft);
}
.locale-switch a {
  color: var(--fog);
  /* A 44px-high target on touch without changing the visual density of the row. */
  padding: .35rem .1rem;
  min-height: 1.9rem;
  display: inline-flex;
  align-items: center;
}
/* A finger needs a bigger target than a pointer does, and the footer stays dense on
   desktop where the extra height would only add whitespace. */
@media (pointer: coarse) {
  .locale-switch { gap: .25rem .9rem; }
  .locale-switch a { min-height: 44px; }
}
.locale-switch a:hover { color: var(--paper); }
.locale-switch a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.locale-switch a[aria-current] {
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .28em;
}