@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* The rebrand introduces a dark hero.  Its technical illustration needs its
   own foreground palette rather than inheriting the page's light-surface grays. */
:root { --hero-ink:#101a2a; --hero-blue:#3a70df; --hero-text:#dceaff; --hero-faint:#a9c4f2; --hero-accent:#ffd25a; }
body { background:#111b2b; color:#161819; }
.hero { background:linear-gradient(112deg,#111b2b 56%,var(--hero-blue) 56%)!important; grid-template-columns:1fr!important; padding-left:8vw!important; color:var(--hero-text); }
.hero h1 { font:800 clamp(82px,12vw,184px)/.68 "Barlow Condensed",sans-serif!important; max-width:7ch; color:var(--hero-text)!important; text-transform:uppercase; }
.hero:after { content:"MOTION\A ENGINE"; white-space:pre; position:absolute; right:6vw; bottom:8%; font:500 clamp(26px,4vw,54px)/.8 "IBM Plex Mono",monospace; color:var(--hero-accent); }
.hero-meta, .hero .domain, .hero .lede, .hero .text-link { color:var(--hero-text); }
.hero .hero-meta { color:var(--hero-faint); }.hero .lede { color:#e3edff; }.hero .domain { color:#c5d9fc; }
.hero .button { background:var(--hero-text); color:var(--hero-ink); border:1px solid var(--hero-text); font-weight:700; }
.hero .button:hover { background:var(--hero-accent); border-color:var(--hero-accent); color:var(--hero-ink); }
.hero .button b, .hero .text-link b { color:#85b2ff; }.hero .button:hover b { color:var(--hero-ink); }
.hero .text-link:hover { color:var(--hero-accent); }

/* Motion-engine diagram: labels must read on both the navy and blue halves. */
.hero .chamber-status, .hero .engine-chamber figcaption { color:var(--hero-text); border-color:rgba(220,234,255,.42); }
.hero .chamber-status span:last-child, .hero .engine-chamber figcaption i { color:var(--hero-accent); }
.hero .io { color:#e5efff; }.hero .io b { color:#fff7dc; }.hero .io span { color:#e5efff; border-color:#83adff; }
.hero .output span { border-color:var(--hero-accent); }
.hero .ring-label { color:var(--hero-ink); background:#f3f7ff; font-weight:500; }
.hero .inner-label { color:#6e4300; background:#fff3cf; }
.hero .engine-core { background:rgba(248,251,255,.95); border-color:var(--hero-ink); color:var(--hero-ink); }
.hero .engine-core b { color:var(--hero-ink); }.hero .engine-core small { color:#8d5b09; }.hero .engine-core i { background:var(--hero-blue); }
.hero .guide { stroke:rgba(226,239,255,.62); }.hero .middle { stroke:#dceaff; }.hero .spoke { stroke:rgba(226,239,255,.62); }
.hero .ring-label, .hero .engine-core, .hero .io, .hero .chamber-status, .hero .engine-chamber figcaption { text-shadow:none; }

/* Raise the smallest labels in dark sections without changing their hierarchy. */
.stack .index, .contact .index, .applications .index, .final dt { color:#c2cbd7; }
.cross-section span, .contact-terms, .effector, .object-label, .contact-diagram small, .final-copy small, footer>span, footer small { color:#d5dce6; }

@media (max-width:600px) {
  .hero { padding-left:5vw!important; background:linear-gradient(145deg,#111b2b 0 66%,var(--hero-blue) 66%)!important; }
  .hero:after { right:5vw; bottom:5%; opacity:.9; }
  .hero .engine-chamber figcaption { color:#e5efff; }
}