:root {
  --navy-900: #0a1822;
  --navy-850: #0d1f2d;
  --navy-800: #10283a;
  --navy-700: #16344a;
  --teal: #1c9d94;
  --teal-bright: #2bb8ad;
  --amber: #e2a52e;
  --amber-soft: #ecbf6e;
  --ivory: #f5f0e7;
  --ivory-card: #fffdf8;
  --ink-navy: #0f2636;
  --ink-soft: #566e7d;
  --ink-faint: #8a9aa6;
  --ink-100: #fff;
  --ink-200: #d6e0e8;
  --ink-300: #9fb1bf;
  --ink-400: #6f8392;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --line-dark: rgba(15, 38, 54, .10);
  --display: 'Space Grotesk', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --maxw: 1180px;
  --beat: 1.7s;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

a {
  color: inherit;
  text-decoration: none
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px
}

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-block
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -.01em
}

h2 {
  font-size: clamp(28px, 3.5vw, 44px)
}

.lead {
  font-size: clamp(17px, 1.5vw, 19px);
  max-width: 58ch
}

section {
  padding: 100px 0;
  position: relative
}

.dark {
  background: var(--navy-900);
  color: var(--ink-200)
}

.light {
  background: var(--ivory);
  color: var(--ink-navy)
}

.hero:not(.light) .hero-note, .dark .hero-note, .dark .cta-note {
  color: var(--ink-200)
}

.light .hero-note, .light .cta-note {
  font-weight: 500;
  color: var(--ink-soft)
}

/* buttons + links */
.btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 7px;
  cursor: pointer;
  border: 0;
  transition: transform .15s, box-shadow .2s, border-color .2s, color .2s;
  display: inline-block
}

.btn-primary {
  background: var(--amber);
  color: #26190a
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(226, 165, 46, .6)
}

.btn-ghost {
  background: transparent
}

.link {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  transition: gap .2s
}

.link:hover {
  gap: 12px
}

/* header */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy-900);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line)
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px
}

.logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--ink-100)
}

.logo span {
  color: var(--amber)
}

.menu {
  display: flex;
  gap: 30px;
  align-items: center
}

.menu a {
  font-size: 15px;
  color: var(--ink-300);
  transition: color .2s
}

.menu a:hover, .menu a.active {
  color: var(--ink-100)
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 22px
}

.lang {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-400)
}

.lang b {
  color: var(--ink-100);
  font-weight: 500
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--ink-100);
  font-size: 24px;
  cursor: pointer
}

/* ===== readability pass v7.2 =====
   Better contrast for micro-copy and larger labels inside SVG/section captions.
   This is intentionally visual-only: no editorial content has been changed. */
:root {
  --micro-dark: #b9c8d2;
  --micro-light: #5c7180;
  --teal-text: #157a73;
  --amber-text: #8f6414;
}

.dark .cta-note,
.dark .final-note,
.dark .rings-foot,
.dark .lineage-label,
.dark .stat-label,
.dark .gal-meta,
.dark .winbar .u,
.dark .exp-foot,
.dark .shifts span,
.footer-copy,
.footer-lang,
.footer-col h4,
.footer-legal a,
.foot .blurb,
.foot h4 {
  color: var(--micro-dark) !important;
}

.cta-note,
.final-note,
.hero-note,
.rings-foot,
.legend,
.lineage-label,
.founders-label,
.f-since,
.mission-card .n,
.book-panel .small,
.persona .sector,
.personas-note,
.logos-row .lbl,
.feat-sector,
.feat-tag,
.feat-quote span,
.mark-sector,
.stat-label,
.gal-meta,
.winbar .u,
.ps-domain,
.ps-instr,
.solution-card .tag,
.way-foot,
.way-badge,
.hero-scrollcue,
.ws-scrollcue,
.cs-scrollcue,
.chips,
.founders-label,
.f-role,
.fit-phase {
  font-size: 13px !important;
  letter-spacing: .07em !important;
}

.light .eyebrow,
.light .persona .sector,
.light .solution-card .tag,
.light .feat-sector,
.light .mark-sector,
.light .mission-card .n,
.light .book-panel .small,
.light .ps-note,
.light .ps-domain,
.light .ps-instr,
.light .founders-label,
.light .f-role,
.light .f-since,
.light .logos-row .lbl,
.light .c-label.sys {
  color: var(--teal-text) !important;
  fill: var(--teal-text) !important;
}

.legend,
.chips,
.personas-note,
.logos-row .lbl,
.founders-label,
.f-since,
.ps-domain,
.ps-instr {
  color: var(--micro-light) !important;
}

.dark .legend,
.dark .chips,
.dark .personas-note,
.dark .logos-row .lbl,
.dark .founders-label,
.dark .f-since,
.dark .ps-domain,
.dark .ps-instr {
  color: var(--micro-dark) !important;
}

.platebar span,
.brick span {
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

.winbar .u {
  font-size: 12.5px !important;
  color: var(--micro-dark) !important;
}

.shot .cap p {
  font-size: 14.5px !important;
}

.c-label.sys {
  font-size: 12px !important;
  letter-spacing: .08em !important;
}

/* Final responsive navigation patch */
.menu-toggle {
  line-height: 1
}

@media (max-width: 860px) {
  header .wrap.nav {
    position: relative
  }

  body.menu-open {
    overflow: hidden
  }

  body.menu-open .menu {
    display: flex !important;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 12px);
    z-index: 90;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: rgba(10, 24, 34, .98);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .35);
    backdrop-filter: blur(18px)
  }

  body.menu-open .menu a {
    font-size: 16px
  }
}