@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
@import url("/assets/site.css");

:root {
  --navy: #0E1E3F;
  --navy-2: #1A2B4F;
  --navy-3: #22365F;
  --ink: #0E1E3F;
  --muted: #5F6877;
  --line: rgba(14, 30, 63, 0.14);
  --line-light: rgba(245, 239, 227, 0.14);
  --gold: oklch(0.72 0.12 80);
  --gold-2: #F5EFE3;
  --paper: #FAF6EC;
  --white: #F5EFE3;
  --soft: #EFE8DA;
  --success: oklch(0.58 0.10 160);
  --danger: oklch(0.62 0.13 30);
  --shadow: 0 18px 42px rgba(8, 18, 31, 0.1);
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html {
  background: var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
}

::selection {
  background: var(--ink);
  color: var(--bone, #F5EFE3);
}

.site-header,
.footer {
  background: rgba(8, 18, 31, 0.96);
}

.site-header {
  border-bottom-color: rgba(245, 239, 227, 0.1);
}

.nav-wrap {
  min-height: 74px;
}

.brand img {
  width: 194px;
}

.nav-links,
.cta-small,
.kicker,
.eyebrow,
.system-head span,
.system-head strong,
.gates-header span,
.gates-header strong,
.gate-item span,
.gates-footer,
.capital-module span,
.route-table th,
.badge,
label {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-links {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.cta-small {
  border-radius: 4px;
}

.cta-small:hover {
  border-color: var(--gold-2);
  color: var(--gold-2);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
}

h1 {
  font-weight: 600;
  letter-spacing: -0.032em;
}

h2 {
  color: var(--ink);
  font-weight: 500;
}

h3 {
  color: var(--ink);
  font-weight: 600;
}

.hero {
  background: var(--navy);
  color: var(--gold-2);
}

.hero::before {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(245, 239, 227, 0.058) 22px 23px),
    linear-gradient(90deg, rgba(245, 239, 227, 0.06), transparent 42%);
  background-size: auto;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 82%, transparent);
}

.hero.has-texture::after {
  opacity: 0.055;
  mix-blend-mode: screen;
}

.hero p.lead,
.lead,
.section.navy .section-lead,
.section.navy p,
.section.navy li,
.hero .plain-list li,
.hero .plain-list li p,
.hero .panel p {
  color: rgba(245, 239, 227, 0.76);
}

.eyebrow,
.kicker,
.system-head span,
.gates-header span,
.gate-item span,
.capital-module span {
  color: color-mix(in oklab, var(--gold-2), transparent 42%);
  font-size: 11px;
  font-weight: 500;
}

.eyebrow::before {
  width: 26px;
}

.section {
  background: var(--paper);
  border-top: 1px solid var(--soft);
}

.section.white,
.home-next,
.home-page {
  background: var(--paper);
}

.section.navy {
  background: var(--navy);
}

.capital-view-section {
  background:
    linear-gradient(90deg, rgba(14, 30, 63, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(14, 30, 63, 0.04) 1px, transparent 1px),
    var(--paper);
  background-size: 72px 72px, 72px 72px, auto;
}

.button,
.card,
.panel,
.panel.light,
.route-table,
.form-box,
input,
select,
textarea,
.notice,
.portrait,
.badge,
.number,
.capital-system,
.gates-frame {
  border-radius: 4px;
}

.button {
  min-height: 46px;
  font-family: var(--font-body);
  font-weight: 700;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.button.primary {
  background: var(--gold-2);
  color: var(--navy);
  border-color: var(--gold-2);
}

.button.dark {
  background: var(--navy);
  color: var(--gold-2);
  border-color: var(--navy);
}

.button.secondary {
  border-color: rgba(245, 239, 227, 0.26);
  color: var(--gold-2);
}

.button.ghost {
  color: var(--navy);
  border-color: var(--line);
}

.card,
.panel.light,
.form-box {
  background: #F5EFE3;
  border-color: var(--soft);
}

.card.dark,
.panel {
  background: rgba(245, 239, 227, 0.055);
  border-color: rgba(245, 239, 227, 0.13);
}

.card p,
.card li,
.section-lead,
.form-note {
  color: var(--muted);
}

.number,
.plain-list li::before {
  background: var(--ink);
  color: var(--gold-2);
}

.plain-list li::before {
  width: 12px;
  height: 2px;
  margin-top: 11px;
  transform: none;
}

.capital-system,
.gates-frame {
  background:
    linear-gradient(90deg, rgba(245, 239, 227, 0.048) 1px, transparent 1px),
    linear-gradient(rgba(245, 239, 227, 0.048) 1px, transparent 1px),
    rgba(245, 239, 227, 0.032);
  background-size: 40px 40px, 40px 40px, auto;
}

.capital-system::before,
.gates-frame::before {
  border-color: rgba(245, 239, 227, 0.1);
}

.capital-system::after,
.gates-frame::after,
.gate-flow::before,
.gate-list::before,
.gates-footer i {
  background: linear-gradient(transparent, rgba(245, 239, 227, 0.62), transparent);
}

.gate-item,
.stack-layer,
.connection-map b,
.system-matrix span,
.gates-matrix span {
  background: rgba(8, 18, 31, 0.58);
}

.gate-item::before,
.connection-map b::before {
  border-color: rgba(245, 239, 227, 0.66);
  background: var(--navy);
}

.gate-item-capital,
.layer-4 {
  border-color: rgba(245, 239, 227, 0.34);
  background: rgba(245, 239, 227, 0.08);
}

.diagnostic-strip {
  border-color: var(--line);
  background: var(--line);
}

.diagnostic-strip span,
.capital-module,
.home-next .profile-card {
  background: #F5EFE3;
}

.capital-module::before {
  background: var(--ink);
}

.route-grid {
  border-radius: 4px;
}

.route-panel.card.dark,
.route-panel-featured.card.dark {
  background: rgba(245, 239, 227, 0.05);
}

.home-principle .notice,
.notice {
  border-left-color: var(--ink);
  background: #F5EFE3;
}

input:focus,
select:focus,
textarea:focus {
  outline-color: rgba(14, 30, 63, 0.24);
  border-color: var(--ink);
}

.footer img {
  width: 188px;
}

.footer h4 {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero {
  --hero-x: 0;
  --hero-y: 0;
  isolation: isolate;
}

.hero::before {
  animation: rebrandGridDrift 22s linear infinite;
  transform: translate3d(
    calc(var(--hero-x) * -18px),
    calc(var(--hero-y) * -18px),
    0
  );
}

.hero-inner::after {
  content: "";
  position: absolute;
  right: min(6vw, 72px);
  bottom: 34px;
  z-index: -1;
  width: min(42vw, 540px);
  height: 220px;
  opacity: 0.28;
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(245, 239, 227, 0.22) 14% 15%, transparent 15%),
    linear-gradient(0deg, transparent 0 34%, rgba(245, 239, 227, 0.18) 34% 35%, transparent 35%),
    linear-gradient(135deg, transparent 0 54%, rgba(245, 239, 227, 0.2) 54% 55%, transparent 55%);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 78%, transparent);
  pointer-events: none;
}

.hero-copy {
  position: relative;
}

.hero-copy h1::after {
  content: "";
  display: block;
  width: min(240px, 48vw);
  height: 10px;
  margin-top: 24px;
  background:
    linear-gradient(var(--gold-2), var(--gold-2)) 0 0 / 58% 2px no-repeat,
    linear-gradient(rgba(245, 239, 227, 0.58), rgba(245, 239, 227, 0.58)) 36% 4px / 52% 2px no-repeat,
    linear-gradient(rgba(245, 239, 227, 0.32), rgba(245, 239, 227, 0.32)) 64% 8px / 28% 2px no-repeat;
}

.hero-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 690px;
  margin-top: 26px;
  border: 1px solid rgba(245, 239, 227, 0.13);
  background: rgba(245, 239, 227, 0.12);
}

.hero-signal-grid div {
  min-height: 104px;
  padding: 18px;
  background: rgba(8, 18, 31, 0.58);
}

.hero-signal-grid span,
.flow-node span {
  display: block;
  color: rgba(245, 239, 227, 0.55);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-signal-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--gold-2);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 0.9;
}

.hero-signal-grid em {
  display: block;
  margin-top: 8px;
  color: rgba(245, 239, 227, 0.58);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.stack-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.stack-orbit i {
  position: absolute;
  right: -16%;
  width: 34%;
  height: 12px;
  background: linear-gradient(90deg, transparent, rgba(245, 239, 227, 0.72), transparent);
  opacity: 0;
  animation: trancheSweep 6.8s ease-in-out infinite;
}

.stack-orbit i:nth-child(1) {
  top: 26%;
}

.stack-orbit i:nth-child(2) {
  top: 48%;
  animation-delay: 0.7s;
}

.stack-orbit i:nth-child(3) {
  top: 70%;
  animation-delay: 1.4s;
}

.gates-frame > *:not(.stack-orbit) {
  position: relative;
  z-index: 1;
}

.gate-item,
.capital-module,
.route-panel,
.card,
.panel {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.gate-item:hover,
.capital-module:hover,
.route-panel:hover,
.card:hover,
.panel:hover {
  transform: translateY(-3px);
}

.gate-item:hover,
.capital-module:hover {
  border-color: rgba(14, 30, 63, 0.28);
}

.card.dark:hover,
.panel:hover,
.route-panel:hover {
  border-color: rgba(245, 239, 227, 0.24);
  background: rgba(245, 239, 227, 0.075);
}

.dossier-lines i {
  position: relative;
  overflow: hidden;
}

.dossier-lines i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(245, 239, 227, 0.78), transparent);
  transform: translateX(-120%);
  animation: lineScan 4.8s ease-in-out infinite;
}

.dossier-lines i:nth-child(2)::after,
.dossier-lines i:nth-child(5)::after {
  animation-delay: 1.1s;
}

.connection-map b,
.gates-matrix span {
  animation: matrixPulse 5.6s ease-in-out infinite;
}

.connection-map b:nth-child(2),
.gates-matrix span:nth-child(3n) {
  animation-delay: 0.9s;
}

.connection-map b:nth-child(4),
.gates-matrix span:nth-child(4n) {
  animation-delay: 1.7s;
}

.capital-motion-band {
  position: relative;
  z-index: 2;
  background: #08121F;
  border-top: 1px solid rgba(245, 239, 227, 0.1);
  border-bottom: 1px solid rgba(245, 239, 227, 0.1);
  overflow: hidden;
}

.motion-rails {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr 0.64fr 0.42fr 0.28fr;
  gap: 6px;
  min-height: 54px;
  align-items: center;
}

.motion-rails span {
  display: block;
  height: 6px;
  background: rgba(245, 239, 227, 0.18);
  transform-origin: left;
  animation: railBreath 4.5s ease-in-out infinite;
}

.motion-rails span:nth-child(2n) {
  background: rgba(245, 239, 227, 0.44);
  animation-delay: 0.8s;
}

.motion-rails span:nth-child(3n) {
  background: var(--gold-2);
  animation-delay: 1.4s;
}

.capital-flow-board {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(180px, 1fr) minmax(0, 0.7fr);
  gap: 18px;
  align-items: center;
  margin-top: 38px;
  padding: 24px;
  border: 1px solid rgba(14, 30, 63, 0.12);
  background: rgba(245, 239, 227, 0.7);
}

.flow-node {
  min-height: 118px;
  padding: 20px;
  border: 1px solid rgba(14, 30, 63, 0.12);
  background: #FAF6EC;
}

.flow-node strong {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

.flow-node span {
  color: color-mix(in oklab, var(--ink), transparent 48%);
}

.flow-bridge {
  display: grid;
  gap: 10px;
}

.flow-bridge i {
  display: block;
  height: 12px;
  background:
    linear-gradient(90deg, var(--ink) 0 34%, color-mix(in oklab, var(--ink), white 42%) 34% 68%, color-mix(in oklab, var(--ink), white 72%) 68%);
  transform-origin: left;
  animation: bridgeLoad 3.8s ease-in-out infinite;
}

.flow-bridge i:nth-child(2) {
  width: 78%;
  animation-delay: 0.45s;
}

.flow-bridge i:nth-child(3) {
  width: 54%;
  animation-delay: 0.9s;
}

.button {
  position: relative;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.26) 48%, transparent 58% 100%);
  transform: translateX(-120%);
  transition: transform 520ms ease;
  pointer-events: none;
}

.button:hover::before {
  transform: translateX(120%);
}

[data-rebrand-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 560ms ease, transform 560ms ease;
}

[data-rebrand-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes rebrandGridDrift {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 0 46px, 54px 0;
  }
}

@keyframes trancheSweep {
  0%,
  18% {
    opacity: 0;
    transform: translateX(0);
  }

  32% {
    opacity: 0.7;
  }

  62% {
    opacity: 0.36;
  }

  100% {
    opacity: 0;
    transform: translateX(-420%);
  }
}

@keyframes lineScan {
  0%,
  32% {
    transform: translateX(-120%);
  }

  68%,
  100% {
    transform: translateX(260%);
  }
}

@keyframes matrixPulse {
  0%,
  100% {
    opacity: 0.62;
  }

  48% {
    opacity: 1;
  }
}

@keyframes railBreath {
  0%,
  100% {
    transform: scaleX(0.54);
    opacity: 0.52;
  }

  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes bridgeLoad {
  0%,
  100% {
    transform: scaleX(0.5);
    opacity: 0.55;
  }

  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .nav-links {
    background: var(--navy);
  }

  .hero-signal-grid,
  .capital-flow-board {
    grid-template-columns: 1fr;
  }

  .capital-flow-board {
    gap: 12px;
  }

  .flow-bridge {
    transform: none;
  }
}

@media (max-width: 700px) {
  .brand img {
    width: 166px;
  }

  .hero-signal-grid {
    margin-top: 22px;
  }

  .hero-signal-grid div,
  .flow-node {
    min-height: auto;
    padding: 16px;
  }

  .hero-inner::after,
  .stack-orbit {
    display: none;
  }

  .motion-rails {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .stack-orbit i,
  .dossier-lines i::after,
  .connection-map b,
  .gates-matrix span,
  .motion-rails span,
  .flow-bridge i {
    animation: none;
  }

  [data-rebrand-reveal] {
    opacity: 1;
    transform: none;
  }
}