:root {
  --void: #05080f;
  --void-2: #070c16;
  --panel: #0b1220;
  --line: #1b2942;
  --line-soft: #14203a;
  --ink: #e9eef7;
  --body: #c3cede;
  --muted: #8b9cb5;
  --faint: #5b6b85;
  --amber: #ffb648;
  --cyan: #4fd8c4;
  --blue: #6ea8ff;
  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --global-nav-h: 34px;
  --bsnav-h: 56px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--global-nav-h) + var(--bsnav-h) + 18px);
}

body {
  margin: 0;
  padding-top: calc(var(--global-nav-h) + var(--bsnav-h));
  overflow-x: hidden;
  background: var(--void);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
}

::selection { background: rgba(255, 182, 72, 0.28); }

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

a:hover { text-decoration: underline; }

a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.global-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: var(--global-nav-h);
  background: rgba(3, 6, 12, 0.94);
  border-bottom: 1px solid rgba(79, 216, 196, 0.16);
  backdrop-filter: blur(12px);
}

.global-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
  min-width: 0;
}

.global-brand {
  flex: 0 0 auto;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.global-brand b { color: var(--amber); }

.global-brand span {
  margin-left: 9px;
  color: var(--faint);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.global-links {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.global-links::-webkit-scrollbar { display: none; }

.global-links a {
  flex: 0 0 auto;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.global-brand:hover,
.global-links a:hover {
  color: var(--ink);
  text-decoration: none;
}

.global-links a[aria-current="page"] { color: var(--amber); }

.bs-nav {
  position: fixed;
  top: var(--global-nav-h);
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--bsnav-h);
  background: rgba(5, 8, 15, 0.9);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
}

.bsnav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
}

.bsnav-mark {
  flex: 0 0 auto;
  padding-right: 18px;
  border-right: 1px solid var(--line-soft);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  white-space: nowrap;
}

.bsnav-mark b { color: var(--amber); }
.bsnav-mark:hover { text-decoration: none; }

.bsnav-rows {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.bsnav-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.bsnav-sites {
  flex: 1;
  justify-content: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bsnav-sites::-webkit-scrollbar { display: none; }

.bsnav-sites a {
  flex: 0 0 auto;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bsnav-sites a:hover {
  color: var(--ink);
  text-decoration: none;
}

.bsnav-sites a[aria-current="page"] { color: var(--amber); }

.hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 108px 0 70px;
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(5, 8, 15, 0.42) 0%, rgba(5, 8, 15, 0.92) 82%, var(--void) 100%),
    url("https://cognicluster.com/assets/site/backdrop-iceplanet.jpg") center 42% / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(5, 8, 15, 0.82) 0%, rgba(5, 8, 15, 0.48) 52%, rgba(5, 8, 15, 0.1) 84%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

.series-chip {
  color: var(--amber);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 1000px;
  margin: 16px 0 22px;
  color: var(--ink);
  font-size: clamp(38px, 5.7vw, 64px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.hero h1 em {
  color: var(--amber);
  font-style: normal;
}

.hero-sub {
  max-width: 64ch;
  margin: 0;
  color: var(--body);
  font-size: 19px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.cta-btn,
.ghost-btn {
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cta-btn {
  padding: 11px 20px;
  background: var(--amber);
  color: #10131a;
}

.cta-btn:hover {
  background: #ffc670;
  text-decoration: none;
}

.ghost-btn {
  padding: 10px 20px;
  border: 1px solid var(--line);
  color: var(--ink);
}

.ghost-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
  text-decoration: none;
}

main,
section,
.site-foot {
  position: relative;
  z-index: 1;
}

.about-section {
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(79, 216, 196, 0.06), transparent 70%),
    var(--void);
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 76px 28px 96px;
}

.reading-wrap { max-width: 900px; }

.sec-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sec-label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(255, 182, 72, 0.55);
}

.about-section h2 {
  max-width: 20ch;
  margin: 0 0 28px;
  color: var(--ink);
  font-size: clamp(30px, 4.6vw, 48px);
  letter-spacing: -0.018em;
  line-height: 1.08;
}

.about-section p {
  max-width: 76ch;
  margin: 0 0 22px;
}

.about-section .act-lede {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.65;
}

.about-section a { color: var(--amber); }

.about-section .act-kicker {
  margin-top: 36px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 750;
}

.site-foot {
  border-top: 1px solid var(--line-soft);
  background: rgba(3, 6, 12, 0.96);
}

.foot-inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.foot-inner b { color: var(--amber); }
.foot-inner div:last-child { text-align: right; }
.foot-inner a { color: var(--muted); }

body.play-page { overflow: hidden; }

.unity-client {
  width: 100%;
  height: calc(100vh - var(--global-nav-h) - var(--bsnav-h));
  background: var(--void);
}

.unity-client iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--void);
}

@media (max-width: 760px) {
  :root {
    --global-nav-h: 38px;
    --bsnav-h: 62px;
  }

  body { font-size: 16px; }

  .global-inner {
    gap: 12px;
    padding: 0 16px;
  }

  .global-brand {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .global-brand span { display: none; }

  .global-links { gap: 13px; }
  .global-links a { font-size: 9.5px; letter-spacing: 0.05em; }

  .bsnav-inner {
    gap: 12px;
    padding: 0 14px;
  }

  .bsnav-mark {
    padding-right: 12px;
    font-size: 12.5px;
    letter-spacing: 0.12em;
  }

  .bsnav-row {
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bsnav-sites { justify-content: flex-start; }
  .bsnav-sites a { font-size: 9px; letter-spacing: 0.05em; }

  .hero { padding: 74px 0 48px; }
  .hero-inner { padding: 0 20px; }
  .series-chip { font-size: 10px; letter-spacing: 0.14em; }
  .hero h1 { font-size: clamp(34px, 11vw, 50px); }
  .hero-sub { font-size: 17px; }

  .wrap { padding: 58px 20px 72px; }
  .about-section h2 { max-width: 18ch; }

  .foot-inner {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 24px 20px;
  }

  .foot-inner div:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}