:root {
  --paper: #F3EEE4; --ink: #14201E; --ink-soft: #3C4441; --muted: #7A7F7B;
  --pine: #24493A; --pine-deep: #1A3529; --amber: #D9A24F; --amber-ink: #1D1608; --amber-soft: #F3DDB0;
  --sky: #BFD6E6; --bark: #5A3E2B; --line: #E2E8F0;
}
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
section, .flow { scroll-margin-top: 110px; }
body { background: var(--paper); color: var(--ink); font-family: "IBM Plex Sans", system-ui, sans-serif; margin: 0; }
a { color: inherit; text-decoration: none; }
.serif { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; letter-spacing: -0.02em; margin: 0; line-height: 1.05; }
.lb-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.chip { display: inline-block; font-size: 14px; padding: 4px 12px; border-radius: 2px; }
.chip-sky { background: var(--sky); color: #0B3A5B; }
.chip-amber { background: var(--amber-soft); color: #7A4E0C; }
.btn-ink { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 8px; transition: background 200ms; }
.btn-ink:hover { background: #2E3A37; }
.btn-amber { display: inline-flex; align-items: center; gap: 8px; background: var(--amber); color: var(--amber-ink); font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 8px; transition: background 200ms; }
.btn-amber:hover { background: #C88F3C; }
.btn-soft { display: inline-flex; align-items: center; background: var(--amber-soft); color: #7A4E0C; font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 8px; }
.btn-soft:hover { background: #ECCF96; }
.site-header, .site-footer, .skip-link { }

/* Nav pill */
.navwrap { position: sticky; top: 12px; z-index: 50; padding: 0 12px; }
.nav { max-width: 1240px; margin: 0 auto; background: #fff; border: 1px solid #ECEAE5; border-radius: 16px; box-shadow: 0 2px 14px rgba(20,32,30,0.08); padding: 12px 16px 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; }
.nav .brand .mark { width: 22px; height: 22px; }
.nav .navcube { display: inline-flex; align-items: center; justify-content: center; perspective: 90px; }
.nav-c3d { width: 13px; height: 13px; animation: none; transform: rotateX(-22deg) rotateY(35deg); }
.nav-c3d b { background: rgba(20,32,30,0.08); border: 1.4px solid #14201E; }
.nav-c3d .f5 { background: rgba(217,162,79,0.85); }
.nav-c3d .f6 { background: rgba(20,32,30,0.35); }
.nav-c3d .f1, .nav-c3d .f2, .nav-c3d .f3, .nav-c3d .f4 { transform-origin: center; }
.nav-c3d .f1 { transform: translateZ(6.5px); } .nav-c3d .f2 { transform: rotateY(180deg) translateZ(6.5px); } .nav-c3d .f3 { transform: rotateY(90deg) translateZ(6.5px); } .nav-c3d .f4 { transform: rotateY(-90deg) translateZ(6.5px); } .nav-c3d .f5 { transform: rotateX(90deg) translateZ(6.5px); } .nav-c3d .f6 { transform: rotateX(-90deg) translateZ(6.5px); }
.nav .links { display: flex; gap: 4px; align-items: center; }
.nav .links a { font-size: 14px; padding: 6px 12px; border-radius: 6px; }
.nav .links a:hover { color: #9C6A16; }
.nav .links a.sales { color: #9C6A16; }
.nav .right { display: flex; align-items: center; gap: 18px; }
.nav .right .login { font-size: 14px; }
@media (max-width: 960px) { .nav .links { display: none; } .navwrap { position: static; padding: 12px 12px 0; } .nav { padding: 10px 12px 10px 16px; } .hero { margin-top: 0; padding-top: 0; } }

/* Footer */
.foot { position: relative; background: var(--bark); padding: 96px clamp(16px, 3vw, 48px) 32px; overflow: hidden; }
.foot .tri1 { position: absolute; top: 0; right: 6%; width: 520px; height: 220px; background: var(--sky); clip-path: polygon(0 0, 100% 0, 62% 100%); }
.foot .tri2 { position: absolute; top: 0; right: 0; width: 260px; height: 300px; background: var(--amber-soft); clip-path: polygon(35% 0, 100% 0, 100% 100%); }
.foot .card { position: relative; max-width: 1240px; margin: 0 auto; background: #F3EEE4; color: var(--ink); border-radius: 24px; padding: 48px clamp(24px, 4vw, 48px); border: none; box-shadow: none; }
.foot .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; }
.foot .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 48px 0; }
.foot .cols p { font-size: 13px; font-weight: 600; color: #9C6A16; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 16px; }
.foot .cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot .cols a { font-size: 15px; color: var(--ink-soft); }
.foot .cols a:hover { color: var(--ink); }
.foot .bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.foot .bottom a { color: #0B3A5B; }
@media (max-width: 720px) { .foot .cols { grid-template-columns: 1fr 1fr; } }

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }
/* switchboard (shared with anims.js) */
/* ---------- Model switchboard ---------- */

.switchboard {
  margin-top: 36px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 22px 22px 16px;
}
.switchboard-scroll { overflow-x: auto; }
.switchboard svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
  color: var(--ink);
}
.sw-label { font-family: var(--font-mono); font-size: 14px; fill: var(--ink); }
.sw-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; fill: var(--muted); }

.sw-route {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  opacity: 0.25;
  transition: opacity 500ms ease, stroke-width 500ms ease, stroke 500ms ease;
}
.sw-route.live {
  stroke: var(--accent);
  stroke-dasharray: none;
  stroke-width: 2;
  opacity: 1;
}
.sw-route.evaling {
  opacity: 0.7;
  stroke-width: 1.4;
  animation: sw-march 1200ms linear infinite;
}
@keyframes sw-march { to { stroke-dashoffset: -18; } }

.sw-model rect {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  fill: transparent;
  opacity: 0.45;
  transition: opacity 500ms ease, stroke-width 500ms ease, fill 500ms ease, stroke 500ms ease;
}
.sw-model.live rect {
  stroke: var(--accent);
  stroke-dasharray: none;
  stroke-width: 2;
  fill: rgba(24, 114, 82, 0.05);
  opacity: 1;
}
.sw-model.evaling rect { opacity: 0.85; }
.sw-model .sw-status { transition: fill 300ms ease; }
.sw-model.live .sw-status { fill: var(--accent-deep); }

.sw-packet { fill: var(--accent-bright); }
.sw-packet.resp { fill: var(--accent-deep); }

.switch-readout {
  margin: 14px 4px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  min-height: 1.6em;
}
.switch-readout .caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--accent);
}
html.anim .switch-readout .caret { animation: sw-blink 1s steps(1) infinite; }
@keyframes sw-blink { 50% { opacity: 0; } }

/* Entrance — the schematic draws itself like the hero box */
html.anim .switchboard:not(.drawn) #switchboard { opacity: 0; }
html.anim .switchboard:not(.drawn) .switch-readout { opacity: 0; }
html.anim .switchboard.drawn #switchboard { animation: sw-in 600ms ease both; }
html.anim .switchboard.drawn .switch-readout { animation: sw-in 700ms ease 2000ms both; }
@keyframes sw-in { from { opacity: 0; } }

html.anim .switchboard.drawn #switchboard > rect,
html.anim .switchboard.drawn #switchboard .sw-feed {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: sw-trace 2400ms var(--ease-in-out) forwards;
}
html.anim .switchboard.drawn #switchboard > rect:nth-of-type(2) { animation-delay: 250ms; }
html.anim .switchboard.drawn #switchboard .sw-feed { animation-delay: 400ms; }
@keyframes sw-trace { to { stroke-dashoffset: 0; } }

.switchboard { margin-top: 48px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px 22px 16px; }
.switchboard-scroll { overflow-x: auto; }
.switchboard svg { display: block; width: 100%; min-width: 640px; height: auto; color: var(--ink); }

/* Inner pages: match the homepage skin */
body { background: var(--paper); color: var(--ink); font-family: "IBM Plex Sans", system-ui, sans-serif; }
h1, h2, h3, .prose h2, .prose h3, .entry h3, .card h3 { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }
.site-header, .site-footer { display: none; }
.page-hero { border-radius: 0 0 36px 36px; overflow: hidden; }
.btn { background: var(--ink); color: #fff; border-radius: 8px; border: 0; font-weight: 600; }
.btn:hover { background: #2E3A37; color: #fff; }
.btn-ghost { background: var(--amber-soft); color: #7A4E0C; }
.eyebrow { color: #7A7F7B; }
.eyebrow::before { background: var(--amber); opacity: 1; }