:root {
  color-scheme: dark;
  --bg: #070908;
  --panel: #0e1210;
  --line: #293129;
  --gold: #d8b45f;
  --cream: #eee8d8;
  --muted: #929a90;
  --green: #7d9a78;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font:
    15px/1.6 Inter,
    Segoe UI,
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}
.site-header {
  height: 78px;
  padding: 0 clamp(20px, 4vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
  background: rgba(7, 9, 8, 0.94);
  backdrop-filter: blur(16px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 38px;
  height: 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #e2bd67, #8f692a);
  clip-path: polygon(50% 0, 100% 17%, 100% 75%, 50% 100%, 0 75%, 0 17%);
  font: 700 24px Georgia;
  color: #12140f;
}
.brand b {
  display: block;
  letter-spacing: 0.18em;
  font: 700 17px Georgia;
}
.brand small {
  display: block;
  color: #7f8a7e;
  font-size: 8px;
  letter-spacing: 0.24em;
}
.site-header nav {
  display: flex;
  gap: 38px;
  color: #aeb5ac;
  font-weight: 650;
}
.site-header nav a:hover {
  color: var(--cream);
}
.header-actions,
.language {
  display: flex;
  align-items: center;
  gap: 12px;
}
.language {
  padding: 3px;
  border: 1px solid var(--line);
}
.language button {
  width: 38px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #737b73;
  cursor: pointer;
}
.language button.active {
  background: var(--gold);
  color: #16160f;
}
.play {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--gold);
  color: #17170f;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
}
.play:hover {
  background: #f0ce78;
}
.play.small {
  min-height: 40px;
  padding: 0 16px;
}
.hero {
  min-height: calc(100vh - 78px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 54%);
  align-items: center;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.hero-copy {
  padding: 80px clamp(28px, 7vw, 126px);
  position: relative;
  z-index: 2;
}
.beta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #5c4c27;
  background: #17150e;
  color: #e2c473;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.beta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e6bb52;
  box-shadow: 0 0 12px #e6bb52;
}
.eyebrow {
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero .eyebrow {
  margin: 38px 0 14px;
}
.hero h1,
.paths h2,
.beta-panel h2 {
  font:
    500 clamp(44px, 5vw, 78px)/1.02 Georgia,
    serif;
  letter-spacing: -0.035em;
  margin: 0;
}
.hero h1 em {
  color: #b9c4b6;
  font-weight: 400;
}
.lede {
  max-width: 650px;
  color: #aeb5ac;
  font-size: 17px;
  margin: 30px 0;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}
.quiet {
  border-bottom: 1px solid #61675f;
  padding: 12px 0;
  color: #c9cec7;
}
.beta-note {
  color: #727a72;
  font-size: 11px;
  margin-top: 22px;
}
.hero-art {
  height: 100%;
  min-height: 650px;
  position: relative;
  background: radial-gradient(circle at 48% 43%, #17201d 0, #0b100e 36%, #070908 72%);
}
.hero-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg), transparent 38%),
    radial-gradient(circle, transparent 40%, rgba(7, 9, 8, 0.65) 78%);
}
.hero-art i {
  position: absolute;
  z-index: 1;
  width: min(76vh, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%);
  background: #0a292e url("/landing-world.webp") center/cover;
  box-shadow:
    inset -70px -30px 100px #020606,
    0 0 90px rgba(44, 85, 79, 0.25);
}
.orbit {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(219, 185, 101, 0.17);
  border-radius: 50%;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%) rotate(-18deg);
}
.orbit.one {
  width: min(84vh, 840px);
  height: min(55vh, 550px);
}
.orbit.two {
  width: min(92vh, 920px);
  height: min(66vh, 660px);
  transform: translate(-50%, -50%) rotate(24deg);
}
.world-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.world-strip span {
  padding: 24px clamp(22px, 4vw, 62px);
  border-right: 1px solid var(--line);
}
.world-strip small {
  display: block;
  color: #707970;
  font-size: 8px;
  letter-spacing: 0.18em;
}
.world-strip b {
  display: block;
  margin-top: 5px;
  color: #c9cdbf;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.paths {
  padding: 120px clamp(24px, 7vw, 130px);
}
.paths > header {
  max-width: 760px;
}
.paths h2,
.beta-panel h2 {
  font-size: clamp(38px, 4vw, 62px);
}
.paths > header > p:last-child,
.beta-panel p {
  max-width: 650px;
  color: #929a90;
  font-size: 16px;
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 64px;
}
.path-grid article {
  min-height: 300px;
  padding: 36px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
}
.path-grid article:hover {
  background: #131914;
}
.path-grid span {
  color: #626a62;
  font:
    12px ui-monospace,
    monospace;
}
.path-grid b {
  margin-top: auto;
  font: 500 24px Georgia;
}
.path-grid p {
  color: #8d958c;
  margin-bottom: 0;
}
.beta-panel {
  margin: 0 clamp(24px, 7vw, 130px) 110px;
  padding: 64px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  border: 1px solid #4c4228;
  background: linear-gradient(115deg, #18160f, #0e1210);
}
footer {
  padding: 36px clamp(24px, 7vw, 130px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #777f77;
  font-size: 11px;
}
.footer-brand {
  color: var(--cream);
}
@media (max-width: 980px) {
  .site-header nav {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    padding-bottom: 30px;
  }
  .hero-art {
    grid-row: 1;
    min-height: 54vh;
  }
  .hero-art:after {
    background: linear-gradient(0deg, var(--bg), transparent 55%);
  }
  .world-strip {
    grid-template-columns: 1fr 1fr;
  }
  .path-grid {
    grid-template-columns: 1fr 1fr;
  }
  .beta-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 620px) {
  .site-header {
    height: 68px;
    padding: 0 14px;
  }
  .header-actions .play {
    display: none;
  }
  .hero {
    min-height: auto;
  }
  .hero-art {
    min-height: 430px;
  }
  .hero-copy {
    padding: 42px 20px 70px;
  }
  .hero h1 {
    font-size: 43px;
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .world-strip,
  .path-grid {
    grid-template-columns: 1fr;
  }
  .paths {
    padding: 78px 20px;
  }
  .path-grid article {
    min-height: 220px;
  }
  .beta-panel {
    margin: 0 20px 70px;
    padding: 34px 26px;
  }
  footer {
    padding: 28px 20px;
    gap: 24px;
    flex-wrap: wrap;
  }
}