:root {
  --ink: #2d115e;
  --ink-deep: #1b073d;
  --coral: #e6405d;
  --coral-bright: #f05d76;
  --paper: #f8f4ed;
  --cream: #fffbf5;
  --gold: #d17b00;
  --sky: #008e9b;
  --green: #008e9b;
  --font-body: "Manrope", "Avenir Next", Avenir, sans-serif;
  --font-display: "Sora", "Avenir Next", Avenir, sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

h1,
h2,
.process-card h3,
.connection-intro h3,
.flow-node strong,
.mode-message h3,
.orbit-core span,
.report-front > strong,
.footer-privacy strong,
.process-index,
.scribble,
.site-header nav.nav-open a {
  font-family: var(--font-display);
}

h1,
h2 {
  letter-spacing: -0.055em;
}

h1 em,
h2 em,
.connection-intro h3 em,
.scribble {
  font-family: inherit;
  font-style: normal;
}

.brand-mark.compact {
  width: 168px;
}

footer .brand-mark {
  width: 205px;
}

.footer-legal {
  color: rgba(255, 255, 255, 0.58);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.25rem 0;
  font-size: 0.62rem;
  line-height: 1.65;
}

.footer-legal p {
  margin: 0;
}

.footer-legal p + p {
  margin-top: 0.3rem;
}

.hero {
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(230, 64, 93, 0.22), transparent 25rem),
    radial-gradient(circle at 84% 18%, rgba(0, 142, 155, 0.15), transparent 24rem),
    linear-gradient(145deg, var(--ink-deep), var(--ink) 58%, #3a176f);
}

.hero-glow {
  background: var(--sky);
}

.tool-ribbon,
.how-section,
.contact-section,
.faq-section {
  background: var(--paper);
}

.connection-lab,
.truth-section {
  background: #eee8f2;
}

.stacked-moments {
  background: #e5dcef;
}

.sealed-file {
  background: var(--gold);
}

.mode-message.blue {
  border-color: var(--sky);
}

.register-art {
  background: var(--coral);
}

.integrity-row b.good,
.contact-form .form-note.success,
.form-note.success {
  color: var(--sky);
}

.seal-large::after {
  content: "MUSELOK · CREATIVE TRACE ·";
}

@media (max-width: 780px) {
  .brand-mark.compact {
    width: 150px;
  }

  .hero h1 {
    font-size: clamp(3.1rem, 13.5vw, 4.6rem);
  }

  .hero .eyebrow {
    max-width: 23rem;
    font-size: 0.6rem;
    line-height: 1.45;
    letter-spacing: 0.12em;
  }

  .site-header nav.nav-open a {
    font-family: var(--font-display);
  }
}