:root {
  --bg: #070705;
  --bg-soft: #0d0d0b;
  --surface: rgba(24, 23, 18, 0.78);
  --surface-strong: #15140f;
  --surface-hover: #1b1912;
  --line: rgba(235, 194, 101, 0.18);
  --line-strong: rgba(235, 194, 101, 0.42);
  --gold: #e9bf63;
  --gold-bright: #ffd887;
  --gold-deep: #9f7130;
  --cream: #f6f0e3;
  --text: #eee9dd;
  --muted: #a8a394;
  --muted-strong: #c8c0af;
  --success: #72d6a1;
  --danger: #ef8d72;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 78% -10%, rgba(191, 140, 50, 0.18), transparent 38rem),
    radial-gradient(circle at -8% 35%, rgba(122, 92, 35, 0.12), transparent 32rem),
    var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  z-index: -1;
}

a {
  color: inherit;
}

button,
select,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  transform: translateY(-180%);
  padding: 10px 14px;
  border-radius: 10px;
  color: #111;
  background: var(--gold-bright);
  font-weight: 800;
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(7, 7, 5, 0.74);
  backdrop-filter: blur(18px);
  transition: border-color 220ms ease, background 220ms ease;
}

.site-header.scrolled {
  border-color: var(--line);
  background: rgba(7, 7, 5, 0.92);
}

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--scroll, 0%);
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  box-shadow: 0 0 14px rgba(255, 216, 135, 0.45);
  transition: width 80ms linear;
}

.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  text-decoration: none;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--gold-bright);
  background: linear-gradient(145deg, rgba(239, 197, 106, 0.17), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 26px rgba(0, 0, 0, 0.32);
  font-family: Georgia, serif;
  font-size: 23px;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 216, 135, 0.18);
  border-radius: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.nav-link {
  padding: 9px 13px;
  border-radius: 11px;
  color: var(--muted-strong);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  transition: color 180ms ease, background 180ms ease;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.055);
}

.language-select {
  min-width: 68px;
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted-strong);
  background: var(--surface-strong);
  cursor: pointer;
}

.language-select:focus-visible,
.menu-toggle:focus-visible,
.btn:focus-visible,
.project-card:focus-visible,
.email-copy:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.menu-toggle {
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--cream);
  background: var(--surface);
  cursor: pointer;
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: "";
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle {
  gap: 4px;
}

.menu-toggle.open span {
  opacity: 0;
}

.menu-toggle.open::before {
  transform: translateY(5.5px) rotate(45deg);
}

.menu-toggle.open::after {
  transform: translateY(-5.5px) rotate(-45deg);
}

.hero {
  position: relative;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  display: grid;
  align-items: center;
  padding: 88px 0 80px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  align-items: center;
  gap: 72px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 19px;
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.live-note {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 23px;
  padding: 8px 11px;
  border: 1px solid rgba(114, 214, 161, 0.18);
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(114, 214, 161, 0.045);
  text-decoration: none;
  font-size: 11px;
  transition: border-color 180ms ease, background 180ms ease;
}

.live-note:hover {
  border-color: rgba(114, 214, 161, 0.4);
  background: rgba(114, 214, 161, 0.08);
}

.live-note > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 12px rgba(114, 214, 161, 0.75);
  animation: live-pulse 2s ease-in-out infinite;
}

.live-note strong {
  color: var(--success);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-note b { color: var(--cream); }
.live-note i { color: var(--gold-bright); font-style: normal; transition: transform 180ms ease; }
.live-note:hover i { transform: translateX(3px); }
@keyframes live-pulse { 50% { opacity: .48; transform: scale(.78); } }

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
}

.hero h1,
.page-hero h1 {
  max-width: 920px;
  margin: 0;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 7.3vw, 6.7rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.96;
}

.hero h1 em,
.page-hero h1 em {
  color: var(--gold-bright);
  font-style: italic;
  font-weight: 400;
}

.hero-copy {
  max-width: 650px;
  margin: 28px 0 0;
  color: var(--muted-strong);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
}

.hero-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: #16120a;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 14px 32px rgba(209, 157, 64, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.btn-primary:hover {
  box-shadow: 0 18px 42px rgba(209, 157, 64, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-secondary {
  border-color: var(--line);
  color: var(--cream);
  background: rgba(255, 255, 255, 0.04);
}

.btn-secondary:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.075);
}

.btn svg {
  width: 18px;
  height: 18px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 38px;
  color: var(--muted);
  font-size: 13px;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(233, 191, 99, 0.8);
}

.hero-art {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.orbit {
  position: absolute;
  width: 430px;
  aspect-ratio: 1;
  border: 1px solid rgba(233, 191, 99, 0.12);
  border-radius: 50%;
  animation: rotate 28s linear infinite;
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 24px rgba(255, 216, 135, 0.95);
}

.orbit::before {
  top: 56px;
  right: 56px;
}

.orbit::after {
  bottom: 76px;
  left: 35px;
}

.orbit-secondary {
  width: 315px;
  border-style: dashed;
  animation-direction: reverse;
  animation-duration: 22s;
}

.studio-emblem {
  position: relative;
  width: 250px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 42% 58% 55% 45% / 45% 45% 55% 55%;
  color: var(--gold-bright);
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 220, 151, 0.18), transparent 45%),
    linear-gradient(145deg, #1c1910, #0c0c09);
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: Georgia, serif;
  font-size: 8rem;
  line-height: 1;
  transform: rotate(-4deg);
  animation: float 7s ease-in-out infinite;
}

.studio-emblem::before {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px solid rgba(233, 191, 99, 0.18);
  border-radius: inherit;
}

.floating-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--muted-strong);
  background: rgba(16, 15, 11, 0.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 700;
}

.floating-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.floating-chip b {
  color: var(--cream);
  font-size: 12px;
}

.floating-chip span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.chip-one { top: 14%; right: 0; }
.chip-two { bottom: 17%; left: 0; animation-delay: -2s; }

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-14px) rotate(1deg); } }

.snapshot-section {
  position: relative;
  z-index: 2;
  padding: 0 0 28px;
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(17, 16, 12, 0.82);
  box-shadow: 0 20px 55px rgba(0,0,0,.24);
}

.snapshot-item {
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 28px;
  border-right: 1px solid var(--line);
}

.snapshot-item:last-child { border-right: 0; }

.snapshot-item strong {
  color: var(--gold-bright);
  font-family: Georgia, serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 1;
}

.snapshot-item span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.section {
  padding: 112px 0;
}

.section-tight {
  padding: 72px 0;
}

.section-kicker {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section-title {
  max-width: 760px;
  margin: 0;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 5vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.section-lead {
  max-width: 660px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 42px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-bright);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.text-link span {
  transition: transform 180ms ease;
}

.text-link:hover span {
  transform: translateX(4px);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.project-card {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  background: linear-gradient(145deg, rgba(25, 24, 18, 0.93), rgba(12, 12, 9, 0.95));
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
  text-decoration: none;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 34px 75px rgba(0, 0, 0, 0.38);
}

.project-card::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -92px;
  bottom: -105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 191, 99, 0.18), transparent 68%);
  transition: transform 300ms ease;
}

.project-watermark {
  position: absolute;
  top: -24px;
  right: -22px;
  width: 210px;
  height: 210px;
  border-radius: 42px;
  opacity: 0.13;
  filter: saturate(0.8);
  transform: rotate(8deg);
  transition: opacity 260ms ease, transform 400ms cubic-bezier(.2,.8,.2,1);
}

.project-card:hover .project-watermark {
  opacity: 0.2;
  transform: rotate(3deg) scale(1.05);
}

.project-card:hover::after {
  transform: scale(1.2);
}

.project-card.featured {
  grid-column: span 6;
  min-height: 410px;
}

.project-card.featured + .project-card {
  grid-column: span 6;
  min-height: 410px;
}

.project-card:nth-child(n + 3) {
  grid-column: span 6;
}

.project-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.project-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--gold-bright);
  background: rgba(233, 191, 99, 0.07);
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 700;
}

.status {
  padding: 6px 10px;
  border: 1px solid rgba(114, 214, 161, 0.2);
  border-radius: 999px;
  color: var(--success);
  background: rgba(114, 214, 161, 0.07);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.status.in-progress {
  border-color: rgba(233, 191, 99, 0.22);
  color: var(--gold-bright);
  background: rgba(233, 191, 99, 0.07);
}

.status.concept {
  border-color: rgba(151, 159, 177, 0.22);
  color: #b9c0ce;
  background: rgba(151, 159, 177, 0.07);
}

.project-card h3 {
  margin: auto 0 8px;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: 35px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.project-card p {
  max-width: 450px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 800;
}

.project-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform 180ms ease, background 180ms ease;
}

.project-card:hover .project-arrow {
  transform: translateX(3px);
  background: rgba(233, 191, 99, 0.08);
}

.explorer-hint {
  max-width: 240px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.world-explorer {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(14, 14, 10, 0.82);
  box-shadow: var(--shadow);
}

.world-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.15);
}

.world-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 15px;
  border: 0;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  font-weight: 750;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.world-tab span {
  color: var(--gold-deep);
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
}

.world-tab:hover {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.035);
}

.world-tab.active {
  color: var(--cream);
  background: linear-gradient(135deg, rgba(233, 191, 99, 0.13), rgba(255, 255, 255, 0.035));
}

.world-stage {
  min-height: 470px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}

.world-scenes {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 48% 52%, rgba(233, 191, 99, 0.1), transparent 38%),
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}

.world-scenes::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 110px rgba(0, 0, 0, 0.62);
}

.world-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}

.world-scene.active {
  opacity: 1;
  transform: scale(1);
}

.scene-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 32px;
  color: var(--gold-bright);
  background: linear-gradient(145deg, #1f1c12, #0d0d09);
  box-shadow: 0 24px 60px rgba(0,0,0,.48), 0 0 50px rgba(233,191,99,.09);
  font-family: Georgia, serif;
  font-size: 55px;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.semantic-node {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(13, 13, 9, 0.92);
  font-size: 12px;
  font-weight: 700;
  animation: node-float 5s ease-in-out infinite;
}

.node-a { top: 18%; left: 14%; }
.node-b { top: 22%; right: 12%; animation-delay: -1.2s; }
.node-c { bottom: 18%; left: 12%; animation-delay: -2.1s; }
.node-d { right: 14%; bottom: 16%; animation-delay: -3.2s; }

.semantic-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, rgba(233,191,99,.42), transparent);
}

.line-a { transform: rotate(-145deg); }
.line-b { transform: rotate(-34deg); }
.line-c { transform: rotate(37deg); }

@keyframes node-float { 50% { transform: translateY(-7px); } }

.trap-scene {
  perspective: 700px;
}

.trap-tile {
  position: absolute;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(233, 191, 99, 0.26);
  background: linear-gradient(145deg, rgba(233,191,99,.09), rgba(255,255,255,.02));
  transform: rotate(45deg) rotateX(48deg);
  box-shadow: 18px 18px 30px rgba(0,0,0,.3);
}

.tile-a { left: 15%; bottom: 15%; }
.tile-b { left: 32%; bottom: 29%; }
.tile-c { left: 49%; bottom: 43%; border-color: rgba(239,141,114,.52); box-shadow: 0 0 28px rgba(239,141,114,.16); }
.tile-d { left: 66%; bottom: 57%; }
.tile-e { left: 78%; bottom: 72%; }

.trap-core {
  position: absolute;
  top: 13%;
  right: 11%;
  color: var(--gold-bright);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.trap-pulse {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--danger);
  border-radius: 50%;
  animation: trap-pulse 2.2s ease-out infinite;
}

.pulse-a { left: 55%; top: 48%; }
.pulse-b { left: 35%; top: 67%; animation-delay: -1.1s; }
@keyframes trap-pulse { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(4); } }

.path-scene svg {
  position: absolute;
  inset: 10% 7%;
  width: 86%;
  height: 80%;
  overflow: visible;
}

.path-scene path {
  fill: none;
  stroke: rgba(233, 191, 99, 0.42);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  animation: path-flow 12s linear infinite;
}

.path-scene path:last-of-type { stroke: rgba(239, 141, 114, 0.38); }
.path-scene circle { fill: var(--gold-bright); filter: drop-shadow(0 0 8px rgba(255,216,135,.72)); }
@keyframes path-flow { to { stroke-dashoffset: -220; } }

.path-label {
  position: absolute;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 21px;
}

.path-label.safe { top: 11%; right: 22%; color: var(--success); }
.path-label.risk { right: 21%; bottom: 7%; color: var(--danger); }

.hide-scene {
  background:
    radial-gradient(circle at 72% 21%, rgba(241, 224, 181, 0.12), transparent 12%),
    linear-gradient(160deg, transparent 45%, rgba(0,0,0,.46) 46%);
}

.hide-moon {
  position: absolute;
  top: 13%;
  right: 16%;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #d9cfb7;
  box-shadow: 0 0 55px rgba(217,207,183,.2);
}

.hide-moon::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 78px;
  top: -10px;
  left: -20px;
  border-radius: 50%;
  background: #0d0d0a;
}

.hide-shadow {
  position: absolute;
  bottom: 0;
  border-radius: 55% 55% 0 0;
  background: linear-gradient(90deg, #090908, #17150f);
  filter: drop-shadow(0 -8px 20px rgba(0,0,0,.3));
}

.shadow-a { left: 9%; width: 145px; height: 255px; transform: skewX(-6deg); }
.shadow-b { left: 41%; width: 110px; height: 190px; }
.shadow-c { right: 6%; width: 170px; height: 130px; transform: skewX(12deg); }

.hide-eye {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 9px rgba(255,216,135,.9);
  animation: blink 4.5s infinite;
}

.eye-a { left: 21%; top: 57%; }
.eye-b { left: 23%; top: 57%; }
@keyframes blink { 0%,46%,50%,100% { transform: scaleY(1); } 48% { transform: scaleY(.05); } }

.hide-platform {
  position: absolute;
  right: 17px;
  bottom: 17px;
  z-index: 4;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted-strong);
  background: rgba(7,7,5,.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.world-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 54px;
}

.world-info h3 {
  margin: 22px 0 13px;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.world-info p {
  margin: 0 0 27px;
  color: var(--muted);
}

.world-info [hidden] {
  display: none;
}

.manifesto {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
  align-items: start;
  padding: 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(120deg, rgba(233, 191, 99, 0.055), transparent 42%),
    rgba(15, 15, 11, 0.78);
}

.roadmap-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.roadmap-grid::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--line-strong) 38%, var(--line) 72%, transparent);
}

.roadmap-card {
  position: relative;
  min-height: 285px;
  padding: 78px 24px 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(18,17,13,.66);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.roadmap-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  background: rgba(24,22,16,.82);
}

.roadmap-card.current { border-color: rgba(114,214,161,.24); }
.roadmap-card.next { border-color: var(--line-strong); }

.roadmap-number {
  position: absolute;
  top: 20px;
  left: 24px;
  color: var(--gold-deep);
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
}

.roadmap-marker {
  position: absolute;
  z-index: 2;
  top: 42px;
  left: 28px;
  width: 13px;
  height: 13px;
  border: 3px solid var(--bg-soft);
  border-radius: 50%;
  background: #706c61;
  box-shadow: 0 0 0 1px var(--line);
}

.roadmap-card.current .roadmap-marker { background: var(--success); box-shadow: 0 0 14px rgba(114,214,161,.45); }
.roadmap-card.next .roadmap-marker { background: var(--gold-bright); box-shadow: 0 0 14px rgba(255,216,135,.5); }

.roadmap-card small {
  color: var(--gold);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.roadmap-card h3 {
  margin: 10px 0 10px;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 500;
}

.roadmap-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.manifesto-copy {
  margin: 0;
  color: var(--muted-strong);
  font-family: Georgia, serif;
  font-size: clamp(1.45rem, 2.7vw, 2.15rem);
  line-height: 1.45;
}

.principles {
  display: grid;
  gap: 10px;
}

.principle {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.principle:last-child {
  border-bottom: 0;
}

.principle-number {
  color: var(--gold);
  font-family: Georgia, serif;
  font-style: italic;
}

.principle strong {
  display: block;
  margin-bottom: 4px;
  color: var(--cream);
}

.principle p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.cta-panel {
  position: relative;
  padding: 72px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 120%, rgba(233, 191, 99, 0.22), transparent 48%),
    linear-gradient(145deg, #17150e, #0d0d0a);
  box-shadow: var(--shadow);
}

.cta-panel h2 {
  max-width: 760px;
  margin: 0 auto;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4.35rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.cta-panel p {
  max-width: 590px;
  margin: 20px auto 0;
  color: var(--muted);
}

.cta-panel .button-row {
  justify-content: center;
}

.page-hero {
  padding: 112px 0 82px;
  text-align: center;
}

.page-hero h1 {
  margin-inline: auto;
  font-size: clamp(3.5rem, 8vw, 7.6rem);
}

.page-hero p {
  max-width: 730px;
  margin: 25px auto 0;
  color: var(--muted-strong);
  font-size: 18px;
}

.word-logo {
  width: 112px;
  height: 112px;
  margin: 0 auto 28px;
  border: 1px solid var(--line-strong);
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 45px rgba(233,191,99,.12);
}

.page-hero .button-row {
  justify-content: center;
}

.word-demo {
  max-width: 880px;
  margin: 18px auto 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(14, 14, 10, 0.84);
  box-shadow: var(--shadow);
}

.demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.demo-head strong {
  color: var(--cream);
}

.demo-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 12px rgba(114, 214, 161, 0.7);
}

.guess-list {
  display: grid;
  gap: 10px;
}

.demo-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}

.demo-prompt strong {
  color: var(--gold-bright);
  font-size: 11px;
  letter-spacing: .04em;
}

.demo-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.demo-options button {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted-strong);
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.demo-options button:hover:not(:disabled) {
  color: var(--cream);
  border-color: var(--line-strong);
  background: rgba(233,191,99,.08);
  transform: translateY(-2px);
}

.demo-options button:disabled {
  opacity: .38;
  cursor: default;
}

.guess.new-guess {
  animation: guess-in 360ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes guess-in { from { opacity:0; transform: translateY(10px) scale(.98); } }

.demo-solved {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 13px 15px;
  border: 1px solid rgba(114,214,161,.22);
  border-radius: 12px;
  color: var(--success);
  background: rgba(114,214,161,.065);
}

.demo-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.demo-solved.show { display: flex; animation: guess-in 360ms ease both; }
.demo-solved strong { margin-right: auto; font-size: 13px; }
.demo-solved button { border: 0; color: var(--cream); background: transparent; text-decoration: underline; cursor: pointer; }

.guess {
  display: grid;
  grid-template-columns: 110px 1fr 58px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.025);
}

.guess span:first-child {
  color: var(--cream);
  font-weight: 750;
}

.guess-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.guess-meter i {
  display: block;
  width: var(--score);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transform-origin: left;
  animation: meter 1s cubic-bezier(.2,.8,.2,1) both;
}

.guess b {
  color: var(--gold-bright);
  text-align: right;
}

@keyframes meter { from { transform: scaleX(0); } }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card {
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(20, 19, 14, 0.7);
}

.feature-card .mini-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--gold-bright);
  background: rgba(233, 191, 99, 0.07);
  font-size: 17px;
}

.feature-card h3 {
  margin: 0 0 8px;
  color: var(--cream);
  font-size: 17px;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.language-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 920px;
  margin: 38px auto 0;
}

.language-pill {
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  font-weight: 700;
}

.faq-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  align-items: start;
}

.faq-heading {
  position: sticky;
  top: 112px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 750;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary i {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold-bright);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  transition: transform 180ms ease, background 180ms ease;
}

.faq-list details[open] summary i {
  transform: rotate(45deg);
  background: rgba(233,191,99,.07);
}

.faq-list details p {
  margin: -2px 55px 24px 0;
  color: var(--muted);
  font-size: 14px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 44px;
}

.step {
  position: relative;
  padding: 0 18px;
  text-align: center;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  width: calc(100% - 54px);
  height: 1px;
  top: 21px;
  left: calc(50% + 27px);
  background: var(--line);
}

.step-number {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold-bright);
  background: var(--bg-soft);
  font-family: Georgia, serif;
  font-style: italic;
}

.step strong {
  display: block;
  color: var(--cream);
  font-size: 14px;
}

.step p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  padding: 52px 0 110px;
}

.contact-card,
.legal-card {
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(19, 18, 13, 0.78);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}

.contact-card h2 {
  margin: 0 0 12px;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 500;
}

.contact-card p {
  color: var(--muted);
}

.email-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 25px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.email-box a {
  color: var(--gold-bright);
  text-decoration: none;
  font-weight: 750;
  word-break: break-word;
}

.email-copy {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.contact-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 15px;
}

.contact-list .dot-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--gold-bright);
}

.contact-list strong {
  display: block;
  color: var(--cream);
  font-size: 14px;
}

.contact-list span {
  color: var(--muted);
  font-size: 13px;
}

.legal-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 0 110px;
}

.legal-head {
  margin-bottom: 32px;
}

.legal-head h1 {
  margin: 0 0 10px;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: clamp(2.7rem, 6vw, 4.8rem);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.legal-head p {
  margin: 0;
  color: var(--muted);
}

.legal-card {
  padding: clamp(24px, 5vw, 54px);
}

.legal-card h2 {
  margin: 40px 0 10px;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 500;
}

.legal-card h2:first-child {
  margin-top: 0;
}

.legal-card p,
.legal-card li {
  color: var(--muted-strong);
}

.legal-card a {
  color: var(--gold-bright);
}

.legal-card ul {
  padding-left: 20px;
}

.site-footer {
  padding: 54px 0 30px;
  border-top: 1px solid var(--line);
  background: rgba(3, 3, 2, 0.42);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr 0.65fr;
  gap: 60px;
}

.footer-brand p {
  max-width: 400px;
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.footer-col strong {
  display: block;
  margin-bottom: 14px;
  color: var(--cream);
  font-size: 13px;
}

.footer-col a {
  display: block;
  width: fit-content;
  margin: 8px 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}

.footer-col a:hover {
  color: var(--gold-bright);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #777368;
  font-size: 12px;
}

.to-top {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.75,.2,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* SoloPath */
.path-page-hero {
  position: relative;
  overflow: hidden;
}

.path-page-hero .container {
  position: relative;
  z-index: 1;
}

.path-page-hero::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  top: -280px;
  left: 50%;
  transform: translateX(-8%);
  border: 1px solid rgba(233, 191, 99, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(233, 191, 99, 0.025), 0 0 0 170px rgba(233, 191, 99, 0.018);
  pointer-events: none;
}

.path-emblem {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  margin: 0 auto 28px;
  border: 1px solid var(--line-strong);
  border-radius: 36px;
  color: var(--gold-bright);
  background: radial-gradient(circle at 50% 25%, rgba(255, 216, 135, 0.2), transparent 55%), var(--surface-strong);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
}

.path-emblem span {
  z-index: 2;
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 1;
}

.path-emblem i,
.path-emblem b {
  position: absolute;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: solid rgba(233, 191, 99, 0.24);
  border-width: 1px 0 0 1px;
  border-radius: 50% 0 0;
}

.path-emblem i { left: 12px; bottom: 9px; transform: rotate(22deg); }
.path-emblem b { right: 11px; top: 12px; transform: rotate(202deg); }

.path-status {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 27px auto 0;
  padding: 8px 12px;
  border: 1px solid rgba(233, 191, 99, 0.18);
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(233, 191, 99, 0.045);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.path-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px rgba(255, 216, 135, 0.7);
  animation: live-pulse 2s ease-in-out infinite;
}

.path-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, rgba(28, 26, 19, 0.95), rgba(12, 12, 9, 0.96));
  box-shadow: var(--shadow);
}

.path-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 30px;
  border-bottom: 1px solid var(--line);
}

.path-preview-head div { display: grid; gap: 2px; }
.path-preview-head small { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.path-preview-head strong { color: var(--cream); font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.path-preview-head > span { color: var(--muted); font-size: 12px; }

.route-board {
  position: relative;
  min-height: 360px;
  background:
    linear-gradient(rgba(233, 191, 99, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 191, 99, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
}

.route-origin,
.route-destination,
.route-choice {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--cream);
  background: #19170f;
  box-shadow: 0 0 0 7px rgba(7, 7, 5, .78), 0 12px 28px rgba(0,0,0,.35);
}

.route-origin { width: 58px; height: 58px; left: 7%; top: calc(50% - 29px); color: var(--gold-bright); font-size: 10px; font-weight: 900; }
.route-destination { width: 64px; height: 64px; right: 7%; top: calc(50% - 32px); color: var(--gold-bright); font-size: 25px; }
.route-choice { width: 49px; height: 49px; color: var(--gold); font: 500 22px Georgia, serif; }
.route-choice-a { left: 45%; top: 13%; }
.route-choice-b { left: 48%; top: calc(50% - 24px); }
.route-choice-c { left: 45%; bottom: 13%; }

.route-line {
  position: absolute;
  z-index: 1;
  left: 11%;
  right: 10%;
  top: 50%;
  height: 2px;
  transform-origin: center;
  background: linear-gradient(90deg, rgba(233, 191, 99, .16), var(--gold), rgba(233, 191, 99, .18));
  box-shadow: 0 0 12px rgba(233, 191, 99, .16);
}

.route-line-a { transform: translateY(-55px) rotate(-14deg); }
.route-line-b { transform: translateY(0); }
.route-line-c { transform: translateY(55px) rotate(14deg); }

.route-clue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 76px;
  padding: 18px 30px;
  border-top: 1px solid var(--line);
  color: var(--muted-strong);
  background: rgba(233, 191, 99, 0.035);
}

.route-clue span { color: var(--gold-bright); font-size: 25px; }
.route-clue p { max-width: 680px; margin: 0; font-size: 14px; }

.path-story-section { background: linear-gradient(180deg, transparent, rgba(233, 191, 99, .025), transparent); }
.path-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); align-items: center; gap: 80px; }
.path-story-copy .section-lead { margin-top: 22px; }

.path-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 25px;
  margin-top: 29px;
}

.path-legend span { display: inline-flex; align-items: center; gap: 9px; color: var(--muted-strong); font-size: 12px; }
.path-legend i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.legend-safe { color: var(--success); background: var(--success); }
.legend-risk { color: var(--danger); background: var(--danger); }
.legend-return { color: var(--gold-bright); background: var(--gold-bright); }

.branch-card {
  position: relative;
  min-height: 440px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 46%, rgba(233, 191, 99, .12), transparent 35%), var(--surface);
  box-shadow: var(--shadow);
}

.branch-node {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #12110d;
  box-shadow: 0 0 0 7px rgba(7, 7, 5, .7), 0 0 20px color-mix(in srgb, currentColor 28%, transparent);
  font-weight: 800;
}

.branch-node.start { left: calc(50% - 24px); bottom: 31px; color: var(--gold-bright); }
.branch-node.safe { left: 18%; top: 48%; color: var(--success); }
.branch-node.risk { right: 18%; top: 48%; color: var(--danger); }
.branch-node.return { left: calc(50% - 24px); top: 25%; color: var(--gold-bright); }
.branch-node.finish { left: calc(50% - 24px); top: 30px; color: var(--cream); }

.branch-line {
  position: absolute;
  z-index: 1;
  width: 2px;
  background: rgba(233, 191, 99, .38);
  transform-origin: bottom;
}

.branch-line.one { height: 140px; left: 39%; bottom: 64px; transform: rotate(44deg); }
.branch-line.two { height: 140px; right: 39%; bottom: 64px; transform: rotate(-44deg); }
.branch-line.three { height: 123px; left: 35%; top: 31%; transform: rotate(-52deg); }
.branch-line.four { height: 123px; right: 35%; top: 31%; transform: rotate(52deg); background: rgba(239, 141, 114, .36); }
.branch-line.five { height: 74px; left: calc(50% - 1px); top: 77px; }

.path-career-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: center;
  gap: 70px;
  padding: clamp(36px, 6vw, 72px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(27, 25, 18, .96), rgba(11, 11, 8, .98));
  box-shadow: var(--shadow);
}

.path-career-panel h2 { max-width: 720px; margin: 0; color: var(--cream); font: 500 clamp(2rem, 4vw, 3.6rem)/1.03 Georgia, serif; letter-spacing: -.045em; }
.path-career-panel p:not(.section-kicker) { max-width: 680px; margin: 24px 0 0; color: var(--muted-strong); }
.career-stats { display: grid; gap: 13px; }
.career-stats > div { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 20px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.022); }
.career-stats small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.career-stats strong { color: var(--cream); font-size: 20px; }
.career-stats i { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.career-stats i::after { content: ""; display: block; width: var(--value); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); box-shadow: 0 0 12px rgba(255,216,135,.4); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 300;
  transform: translate(-50%, 22px);
  padding: 11px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--cream);
  background: #18160f;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .hero-copy-wrap {
    text-align: center;
  }

  .hero h1 {
    margin-inline: auto;
  }

  .hero-copy {
    margin-inline: auto;
  }

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

  .hero-art {
    min-height: 390px;
  }

  .orbit { width: 340px; }
  .orbit-secondary { width: 250px; }
  .studio-emblem { width: 205px; font-size: 6.5rem; }

  .project-card,
  .project-card.featured,
  .project-card.featured + .project-card {
    grid-column: span 6;
  }

  .manifesto {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .snapshot-grid { grid-template-columns: repeat(2, 1fr); }
  .snapshot-item:nth-child(2) { border-right: 0; }
  .snapshot-item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .world-stage { grid-template-columns: 1fr; }
  .world-scenes { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--line); }
  .world-info { padding: 38px; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 35px; }
  .step:nth-child(3)::after { display: none; }
  .roadmap-grid { grid-template-columns: repeat(2, 1fr); }
  .roadmap-grid::before { display: none; }
  .faq-layout { grid-template-columns: 1fr; gap: 42px; }
  .faq-heading { position: static; }
  .path-story-grid,
  .path-career-panel { grid-template-columns: 1fr; gap: 44px; }
  .branch-card { min-height: 390px; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--container)); }

  .nav { min-height: 68px; }
  .menu-toggle { display: grid; margin-left: auto; }
  .language-select { order: 2; }

  .nav-links {
    position: absolute;
    top: 68px;
    left: 14px;
    right: 14px;
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(13, 13, 10, 0.98);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .nav-links.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-link { padding: 12px 13px; }
  .hero { padding: 64px 0 55px; }
  .hero h1 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .hero-art { min-height: 330px; }
  .orbit { width: 290px; }
  .orbit-secondary { width: 220px; }
  .studio-emblem { width: 174px; font-size: 5.4rem; }
  .floating-chip { font-size: 10px; }
  .section { padding: 82px 0; }
  .section-heading-row { align-items: start; flex-direction: column; }
  .projects-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
  }

  .project-card,
  .project-card.featured,
  .project-card.featured + .project-card,
  .project-card:nth-child(n + 3) {
    grid-column: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 330px;
    align-self: stretch;
  }
  .manifesto { padding: 30px; }
  .cta-panel { padding: 52px 23px; }
  .feature-grid { grid-template-columns: 1fr; }
  .world-tabs { overflow-x: auto; grid-template-columns: repeat(4, minmax(145px, 1fr)); }
  .world-scenes { min-height: 325px; }
  .world-info { padding: 30px; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; text-align: left; padding: 0; }
  .step-number { margin: 0; grid-row: span 2; }
  .step:not(:last-child)::after { width: 1px; height: calc(100% - 32px); top: 50px; left: 21px; display: block; }
  .step strong { padding-top: 3px; }
  .step p { margin: -8px 0 0; }
  .contact-layout { grid-template-columns: 1fr; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .path-preview-head { align-items: flex-start; flex-direction: column; }
  .route-board { min-height: 310px; }
  .route-origin { left: 5%; }
  .route-destination { right: 5%; }
  .path-career-panel { padding: 34px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; }
}

@media (max-width: 480px) {
  .brand span:last-child { display: none; }

  .project-card,
  .project-card.featured,
  .project-card.featured + .project-card,
  .project-card:nth-child(n + 3) {
    min-height: 300px;
    padding: 24px;
    border-radius: 22px;
  }

  .project-card h3 {
    margin-top: auto;
    font-size: 31px;
  }

  .project-card p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .project-top {
    gap: 10px;
  }

  .project-top .status {
    max-width: 150px;
    text-align: center;
  }

  .project-footer {
    gap: 10px;
    margin-top: 20px;
  }
  .language-select { min-width: 62px; }
  .hero-actions .btn,
  .page-hero .btn { width: 100%; }
  .hero-meta { gap: 10px 16px; }
  .live-note { margin-inline: auto; }
  .hero-art { min-height: 290px; }
  .orbit { width: 260px; }
  .orbit-secondary { width: 195px; }
  .studio-emblem { width: 155px; font-size: 4.8rem; }
  .chip-one { right: -5px; }
  .chip-two { left: -4px; }
  .guess { grid-template-columns: 78px 1fr 48px; gap: 9px; font-size: 12px; }
  .demo-prompt { align-items: flex-start; flex-direction: column; }
  .demo-options button { flex: 1 1 calc(50% - 8px); }
  .demo-solved { align-items: flex-start; flex-wrap: wrap; }
  .contact-card { padding: 26px; }
  .snapshot-item { min-height: 108px; padding: 20px; }
  .snapshot-item strong { font-size: 29px; }
  .email-box { align-items: flex-start; flex-direction: column; }
  .path-emblem { width: 96px; height: 96px; border-radius: 29px; }
  .path-emblem span { font-size: 45px; }
  .route-board { min-height: 270px; }
  .route-origin { width: 46px; height: 46px; top: calc(50% - 23px); font-size: 8px; }
  .route-destination { width: 50px; height: 50px; top: calc(50% - 25px); }
  .route-choice { width: 40px; height: 40px; font-size: 18px; }
  .route-choice-a { top: 12%; }
  .route-choice-b { top: calc(50% - 20px); }
  .route-choice-c { bottom: 12%; }
  .route-clue { align-items: flex-start; padding: 17px 20px; }
  .branch-card { min-height: 350px; }
  .branch-node.safe { left: 12%; }
  .branch-node.risk { right: 12%; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}