/* ============================================================
   Arvynex Technologies
   Palette and type are the supplied brand pack, unchanged:
   Ink #0B0D12 · Signal #C8F03C · Slate #4A5568 · Mist #8A93A3 · Paper #F7F8FA
   Space Grotesk for headings, Inter for body.

   Signal is the node in the mark, and it is treated that way: it marks
   convergence points — the node burning through the stack, the node on each
   step of the spine, the live flow, the primary action — and nothing else.
   Never body text, per the pack.

   The depth in the layout comes from glass rather than from extra colour:
   a white fill at 2–6%, a white hairline at ~16%, and a blur behind it.
   ============================================================ */

:root {
  /* The pack's palette still governs the logo, which is why Signal is here
     unchanged. The page around it has moved to a deeper, violet-cast ground
     with a light ribbon for atmosphere — the brief asked for futuristic, and
     flat near-black was reading as a template.

     Signal stays the only *functional* accent: buttons, live states, the node.
     The ribbon is atmosphere and never carries meaning, so the page still has
     one accent colour to read, not three. */
  /* The pack's light palette, used as the pack describes it. Signal is never
     body text here — on a pale ground it has nowhere near the contrast — so
     it only ever appears as a filled surface with ink on top, or as the node.
     --hair drives every hairline and glass fill in one place, which is how
     the whole surface system flips from a dark build to a light one. */
  /* Deep ground, not flat black: a near-black carrying a blue cast, with two
     lifted surfaces above it so sections separate without a border. The pale
     build read as washed out — this keeps the weight and spends the light on
     the type instead. */
  --ink: #0a0c14;
  --signal: #c8f03c;
  --slate: #6b7489;
  --mist: #9ba4b8;
  --paper: #f2f4f8;

  --ink-1: #10131d;
  --ink-2: #171b27;
  --line: #252a38;
  --hair: 255, 255, 255;

  --violet: #4c35a8;
  --magenta: #7b3f8f;
  --azure: #1d6fa8;

  --glass: rgba(var(--hair), 0.035);
  --glass-line: rgba(var(--hair), 0.13);
  --glass-hi: rgba(var(--hair), 0.07);

  /* Unbounded is the pack's own wordmark face, so the headings are set in the
     same geometry as the logo. It is wide and highly voiced — used large and
     sparingly, with Inter carrying everything that has to be read in volume
     and JetBrains Mono for anything that reads as data. */
  --display: 'Instrument Serif', ui-serif, Georgia, serif;
  --body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --band-y: clamp(72px, 10vw, 136px);
  --shell: 1220px;
  --r: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--signal); color: #0a0c14;
  padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
}

/* ---------- atmosphere ---------- */

/* A light ribbon sweeping behind the page, built from three blurred ellipses
   rather than the reference's background image — nothing to download, and it
   recolours from the tokens above. It drifts slowly; it never carries
   meaning, so nothing is lost when it is switched off. */
.aura {
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none; overflow: hidden;
  filter: blur(90px) saturate(1.05);
}
.aura i {
  position: absolute; display: block; border-radius: 50%;
  /* Far fainter than on the dark build: on a pale ground these read as a
     tint in the paper, not as light sources. */
  opacity: 0.4;
}
.aura-a {
  width: 72vw; height: 46vw;
  top: -22vw; left: -14vw;
  background: radial-gradient(circle, var(--violet), transparent 68%);
  animation: aura-a 34s ease-in-out infinite alternate;
}
.aura-b {
  width: 58vw; height: 40vw;
  top: -8vw; right: -10vw;
  background: radial-gradient(circle, var(--magenta), transparent 66%);
  opacity: 0.2;
  animation: aura-b 42s ease-in-out infinite alternate;
}
.aura-c {
  width: 64vw; height: 34vw;
  top: 26vw; left: 18vw;
  background: radial-gradient(circle, var(--azure), transparent 70%);
  opacity: 0.26;
  animation: aura-c 50s ease-in-out infinite alternate;
}
@keyframes aura-a { to { transform: translate3d(9vw, 5vw, 0) scale(1.12); } }
@keyframes aura-b { to { transform: translate3d(-7vw, 8vw, 0) scale(1.08); } }
@keyframes aura-c { to { transform: translate3d(6vw, -6vw, 0) scale(0.92); } }

/* ---------- the grid the page sits on ---------- */

.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(var(--hair), 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--hair), 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Faded at the edges so it reads as texture, not as graph paper. */
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}

/* ---------- type ---------- */

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; }
h3 { margin: 0; text-wrap: balance; }

h1 { font-size: min(clamp(2.6rem, 1.2rem + 5.4vw, 5.6rem), 7.8svh); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem); line-height: 1.08; }
h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.16rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--mist); margin: 0 0 20px;
}
.tick {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); flex: none;
  box-shadow: 0 0 0 3px rgba(200, 240, 60, 0.16);
}

.lede {
  color: var(--mist);
  font-size: clamp(0.97rem, 0.92rem + 0.35vw, 1.14rem);
  line-height: 1.62; margin: 0; max-width: 54ch;
}

/* ---------- buttons ---------- */

.btn {
  --btn-bg: var(--signal);
  --btn-fg: #0a0c14;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--body); font-weight: 600; font-size: 0.93rem;
  letter-spacing: -0.005em; text-decoration: none;
  padding: 14px 26px; border: 1px solid transparent; border-radius: 999px;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-ghost {
  --btn-bg: var(--glass);
  --btn-fg: var(--paper);
  border-color: var(--glass-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: rgba(var(--hair), 0.34); }

.btn-sm { padding: 10px 18px; font-size: 0.88rem; }

/* ---------- header ---------- */

.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 12, 20, 0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.top.is-stuck { border-bottom-color: var(--line); background: rgba(10, 12, 20, 0.93); }

.top-in { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: clamp(82px, 8vw, 112px); }

/* The pack sets a 120px minimum for the horizontal lockup. The SVG carries
   20px of its own padding inside a 449-wide box, so the box has to be ~134px
   for the artwork itself to clear that minimum. */
.brand { display: block; flex: none; }
.brand img { width: clamp(168px, 16vw, 236px); height: auto; }

.nav { display: flex; gap: clamp(14px, 2vw, 28px); margin-right: auto; font-size: 0.93rem; }
.nav a { color: var(--mist); text-decoration: none; padding: 6px 0; transition: color 0.16s ease; }
.nav a:hover { color: var(--paper); }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 12px; cursor: pointer;
}
.burger span { display: block; width: 17px; height: 1.5px; margin-inline: auto; background: var(--paper); }

/* `display` on a bare .sheet would beat the user agent's `[hidden]` rule and
   leave the menu open on every page load. The visible state carries the
   display value, so the attribute stays authoritative. */
.sheet { display: none; }
.sheet:not([hidden]) {
  display: grid;
  border-top: 1px solid var(--line);
  padding: 8px var(--gutter) 18px;
}
.sheet a {
  padding: 13px 0; font-family: var(--body); font-weight: 600; font-size: 1.05rem;
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.sheet a:last-child { border-bottom: 0; }

@media (max-width: 980px) {
  .nav { display: none; }
  .top-in .btn-sm { display: none; }
  .burger { display: flex; margin-left: auto; }
}

/* ---------- hero ---------- */

/* Room at the foot for the wordmark to rise into, and overflow hidden so it
   is cut by the section edge rather than by the viewport. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(16px, 2vw, 30px) clamp(150px, 32svh, 380px);
}

/* The letters are a window onto the light ribbon rather than a flat tint, so
   the wordmark picks up whatever the aura is doing behind it. The gradient
   drifts, which is the only reason it reads as lit rather than painted. */
.hero-word {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  /* Edge to edge, not inside the content shell. */
  width: 100vw;
  text-align: center;
  line-height: 0.76;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
.hero-word span {
  font-family: var(--display);
  font-weight: 700;
  /* Sized to span the viewport exactly. The lockup measures 2.98x its own
     font-size at this tracking, so 100/2.98 = 33.5vw puts the A on one edge
     and the X on the other at every width. */
  font-size: 33.5vw;
  letter-spacing: -0.055em;
  display: block;
  background: linear-gradient(100deg, #7c6fd4 0%, #a071c4 34%, #4f9ad6 66%, #6a62bd 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.8;
  /* Solid where it meets the section edge and fading upward, so it reads as
     rising out of the foot. The footer's copy of the word fades the other way
     and sinks — the page opens and closes on the same letterforms. */
  mask-image: linear-gradient(to top, #000 22%, rgba(0, 0, 0, 0.62) 58%, transparent 98%);
  -webkit-mask-image: linear-gradient(to top, #000 22%, rgba(0, 0, 0, 0.62) 58%, transparent 98%);
  animation: word-drift 22s ease-in-out infinite alternate;
}
@keyframes word-drift { to { background-position: 100% 0; } }

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(24px, 3.2vw, 48px);
  align-items: start;
}

.hero h1 { margin-top: clamp(4px, 1.4vw, 18px); margin-bottom: clamp(14px, 2svh, 20px); }
.hero .lede { margin-bottom: clamp(18px, 2.6svh, 26px); max-width: 46ch; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---------- the fact row ---------- */

.facts {
  list-style: none; margin: clamp(32px, 4vw, 46px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  gap: clamp(18px, 2.4vw, 32px);
}
.facts li { position: relative; padding-left: clamp(18px, 2.4vw, 32px); }
.facts li:first-child { padding-left: 0; }
/* Hairline separators, as dividers rather than as decoration. */
.facts li + li::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--line);
}
.facts b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  letter-spacing: -0.03em; line-height: 1.1;
}
.facts span { display: block; margin-top: 3px; color: var(--mist); font-size: 0.78rem; line-height: 1.4; max-width: 22ch; }

@media (max-width: 560px) {
  /* Both calls to action on one row: at full desktop padding they wrap, which
     costs a whole row and pushed them under the fold. */
  .hero .btn { padding-inline: 18px; font-size: 0.88rem; }
  .hero .lede { line-height: 1.52; }
  .facts { grid-template-columns: 1fr; gap: 14px; }
  .facts li, .facts li:first-child { padding-left: 0; }
  .facts li + li::before { display: none; }
  .facts span { max-width: none; }
}

/* ---------- hero artwork: the system map ---------- */

.hero-art { position: relative; aspect-ratio: 1 / 1.02; min-height: 340px; }

.map { position: absolute; inset: 0 0 26% 0; width: 100%; height: 74%; overflow: visible; }

.n-box {
  fill: rgba(var(--hair), 0.045);
  stroke: rgba(var(--hair), 0.14);
  stroke-width: 1;
}
.n-ico { stroke: var(--mist); }
.n-lab {
  fill: var(--mist);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.n-mid { text-anchor: middle; }
.hub-lab { fill: var(--paper); }

.wires { opacity: 0.85; }

.hub-halo { fill: rgba(200, 240, 60, 0.3); animation: hub-breathe 3.4s ease-in-out infinite; }
@keyframes hub-breathe { 50% { opacity: 0.45; } }

.hub-ring {
  fill: var(--ink);
  stroke: var(--signal);
  stroke-width: 1.6;
}
.hub-mark path { stroke: var(--paper); }
.hub-mark circle { fill: var(--signal); }

/* Server lights. Staggered so the rack reads as busy rather than as a strobe. */
.leds rect { fill: rgba(var(--hair), 0.13); }
.led { fill: var(--signal); animation: led 2.1s steps(1, end) infinite; }
.led:nth-of-type(2) { animation-delay: 0.5s; }
.led:nth-of-type(3) { animation-delay: 1.1s; }
.led:nth-of-type(4) { animation-delay: 1.6s; }
@keyframes led { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.22; } }

.pk { fill: var(--signal); }
.pk-retry { fill: #ffffff; }

/* ---------- status chips ---------- */

.pops { position: absolute; inset: 0; pointer-events: none; }
.pop {
  position: absolute;
  transform: translate(-50%, -230%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  animation: pop-in 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.pop b { font-weight: 500; }
.pop-ok { background: rgba(200, 240, 60, 0.16); border: 1px solid rgba(200, 240, 60, 0.42); color: var(--signal); }
.pop-warn { background: rgba(var(--hair), 0.1); border: 1px solid rgba(var(--hair), 0.26); color: var(--paper); }
@keyframes pop-in {
  0% { opacity: 0; transform: translate(-50%, -165%) scale(0.86); }
  18% { opacity: 1; transform: translate(-50%, -230%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -285%); }
}

/* ---------- the request log ---------- */

.hero-log {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(340px, 94%);
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: rgba(14, 17, 26, 0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.log-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(var(--hair), 0.07);
  font-family: var(--mono); font-size: 0.63rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--mist);
}
.log-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 3px rgba(200, 240, 60, 0.16);
  animation: hub-breathe 2s ease-in-out infinite;
}

.log-lines { list-style: none; margin: 0; padding: 7px 12px 9px; display: grid; gap: 4px; }
.log-lines li {
  display: grid; grid-template-columns: 2.9em 1fr auto;
  gap: 8px; align-items: baseline;
  font-family: var(--mono); font-size: 0.64rem;
  animation: log-in 0.4s ease both;
}
@keyframes log-in { from { opacity: 0; transform: translateY(-5px); } }
.lg-v { font-style: normal; color: var(--slate); }
.lg-p { font-style: normal; color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-c { font-style: normal; }
.lg-ok { color: var(--signal); }
.lg-warn { color: var(--paper); }

@media (max-width: 980px) {
  /* The single-column rule was lost when this block was rewritten, which left
     the hero in two columns on a phone: the copy squeezed into half the width
     with the map sitting on top of it. */
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { max-width: 540px; margin-inline: auto; width: 100%; order: 2; }
}
@media (max-width: 560px) {
  .hero-art { min-height: 290px; }
  .hero-log { width: min(260px, 86%); }
  .n-lab { font-size: 12px; }
}

/* ---------- industries strip ---------- */

.strip {
  border-block: 1px solid var(--line);
  padding-block: clamp(20px, 2.6vw, 30px);
  background: rgba(var(--hair), 0.012);
}
.strip .shell { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; }
.strip-label {
  margin: 0; flex: none;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate);
}
/* The strip scrolls. The list is duplicated in the markup and the track
   shifts by exactly half its width, so the loop has no seam. */
.strip .shell { overflow: hidden; }
.strip-track {
  display: flex; flex: 1; min-width: 0;
  width: max-content;
  animation: strip-run 34s linear infinite;
}
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes strip-run { to { transform: translateX(-50%); } }

.strip-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(10px, 1.6vw, 22px);
  font-family: var(--body); font-weight: 500; font-size: clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem);
  color: var(--mist);
  padding-right: clamp(10px, 1.6vw, 22px);
}
.strip-list li { white-space: nowrap; }
.strip-list li { position: relative; padding-left: clamp(10px, 1.6vw, 22px); }
.strip-list li:first-child { padding-left: 0; }
.strip-list li + li::before {
  content: '·'; position: absolute; left: 0; transform: translateX(-50%); color: var(--slate);
}

/* ---------- bands ---------- */

.band { padding-block: var(--band-y); }
.band-alt { background: var(--ink-1); }

.band-head { margin-bottom: clamp(34px, 4.6vw, 58px); max-width: 32ch; }
.band-head-wide { max-width: 44ch; }
.band-head h2 { text-wrap: pretty; }
.band-head .lede { margin-top: 14px; }

/* ---------- what we build: the switcher ---------- */

.band-build { background: var(--ink-1); position: relative; overflow: hidden; }
.band-build .band-head { margin-bottom: clamp(26px, 3vw, 40px); }

.switch {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.switch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.sw {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: none;
  border: 1px solid transparent;
  border-radius: 13px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sw:hover { background: rgba(var(--hair), 0.03); }
.sw[aria-selected='true'] {
  background: rgba(var(--hair), 0.045);
  border-color: var(--glass-line);
}

.sw-ix {
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.sw[aria-selected='true'] .sw-ix { color: var(--signal); }

.sw .ico {
  display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0;
  border-radius: 11px;
  background: rgba(var(--hair), 0.035);
  border: 1px solid rgba(var(--hair), 0.08);
  color: var(--mist);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sw .ico svg { width: 19px; height: 19px; overflow: visible; }
.sw[aria-selected='true'] .ico {
  background: rgba(200, 240, 60, 0.14);
  border-color: rgba(200, 240, 60, 0.38);
  color: var(--signal);
}

.sw-text { display: block; min-width: 0; }
.sw-text b {
  display: block;
  font-family: var(--body); font-weight: 600; font-size: 0.98rem;
  letter-spacing: -0.015em; color: var(--mist);
  transition: color 0.2s ease;
}
.sw[aria-selected='true'] .sw-text b { color: var(--paper); }
.sw-text em {
  display: block; font-style: normal;
  font-size: 0.78rem; color: var(--slate); line-height: 1.4; margin-top: 1px;
}

/* ---------- the tilted surface ---------- */

.stage { perspective: 1500px; perspective-origin: 30% 50%; }

.panel {
  /* Tilted toward the list, so the two halves address each other rather than
     sitting side by side. */
  transform: rotateY(-15deg) rotateX(7deg) rotateZ(0.6deg);
  transform-style: preserve-3d;
  border-radius: 16px;
  border: 1px solid rgba(var(--hair), 0.11);
  background: linear-gradient(180deg, #1c2130 0%, #151926 55%, #0f131d 100%);
  box-shadow:
    0 60px 120px -40px rgba(0, 0, 0, 0.9),
    0 0 100px -46px rgba(200, 240, 60, 0.3),
    inset 0 1px 0 rgba(var(--hair), 0.08);
  overflow: hidden;
  position: relative;
}
/* The lit top edge. */
.panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--signal), transparent);
  opacity: 0.75;
}

.panel-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid rgba(var(--hair), 0.1);
  background: rgba(var(--hair), 0.025);
}
.panel-dots { display: flex; gap: 5px; }
.panel-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--hair), 0.22); }
.panel-name {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--mist);
  margin-right: auto;
}
.panel-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #4e7a09;
}
.panel-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 3px rgba(200, 240, 60, 0.15);
}

.panel-body {
  padding: clamp(14px, 1.6vw, 20px);
  display: grid; gap: 13px;
  min-height: clamp(230px, 22vw, 290px);
  align-content: start;
  font-size: 0.78rem;
}
.panel-body.swap { animation: panel-swap 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes panel-swap {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- panel primitives ---------- */

.pv-wire { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.pv-block { background: rgba(var(--hair), 0.085); border-radius: 6px; }
.pv-block.nav { background: rgba(var(--hair), 0.16); }
.pv-block.lit { background: rgba(200, 240, 60, 0.3); }

.pv-table { display: grid; gap: 1px; background: rgba(var(--hair), 0.09); border-radius: 9px; overflow: hidden; }
.pv-tr {
  display: grid; grid-template-columns: 1.1fr 1fr auto;
  gap: 10px; padding: 8px 11px;
  background: #161a26;
  color: var(--paper);
}
.pv-th { color: var(--slate); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pv-tr span:last-child { text-align: right; }
.pv-tr span { font-variant-numeric: tabular-nums; }

.pv-pill {
  display: inline-block; font-style: normal;
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; letter-spacing: 0.02em;
}
.pv-ok { background: rgba(200, 240, 60, 0.15); color: var(--signal); }
.pv-warn { background: rgba(var(--hair), 0.07); color: var(--paper); }
.pv-bad { background: rgba(var(--hair), 0.05); color: var(--mist); }

.pv-bars { display: flex; align-items: flex-end; gap: 5px; height: 84px; }
.pv-bars i { flex: 1; background: rgba(var(--hair), 0.16); border-radius: 3px 3px 0 0; }
.pv-bars i.on { background: var(--signal); }

.pv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pv-stat { border: 1px solid rgba(var(--hair), 0.11); background: rgba(var(--hair),0.022); border-radius: 9px; padding: 9px 11px; }
.pv-k { display: block; font-size: 0.65rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.pv-stat b { font-family: var(--body); font-weight: 600; font-size: 0.88rem; }

.pv-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pv-col { display: grid; gap: 6px; align-content: start; }
.pv-card { background: rgba(var(--hair), 0.09); border-radius: 6px; }
.pv-col:nth-child(4) .pv-card { background: rgba(200, 240, 60, 0.32); }

.pv-code, .pv-log { display: grid; gap: 3px; font-family: var(--mono); font-size: 0.72rem; }
.pv-line { display: flex; gap: 10px; align-items: baseline; }
.pv-no { color: var(--slate); min-width: 2.2em; font-variant-numeric: tabular-nums; }
.pv-src { color: var(--mist); }
.pv-code i { font-style: normal; }
.pv-kw { color: var(--signal); }
.pv-pn { color: #9fb0cc; }
.pv-st { color: #d8e3f2; }
.pv-nm { color: var(--paper); }
.pv-cm { color: var(--slate); }
.pv-pl { color: var(--mist); }
.pv-log .pv-pill { min-width: 54px; text-align: center; }

.pv-fields { display: grid; gap: 7px; }
.pv-field { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; align-items: center; }
.pv-input {
  font-style: normal; display: block;
  padding: 7px 10px; border-radius: 7px;
  background: rgba(var(--hair), 0.06);
  border: 1px solid rgba(var(--hair), 0.1);
  color: var(--paper);
}

.pv-phone {
  position: relative; width: 150px; margin-inline: auto;
  border: 1px solid rgba(var(--hair), 0.13); border-radius: 18px;
  padding: 14px 10px 10px;
  background: rgba(var(--hair), 0.025);
}
.pv-notch {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 3px; background: rgba(var(--hair), 0.16);
}
.pv-phone-in .pv-wire { gap: 5px; }

@media (max-width: 980px) {
  .switch { grid-template-columns: 1fr; }
  .stage { perspective-origin: 50% 50%; order: -1; }
  .panel { transform: rotateX(4deg); }
  .sw-text em { display: none; }
  .sw { padding: 9px 12px; }
}

/* ---------- footer ---------- */

.foot {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: clamp(44px, 6vw, 72px);
  /* Room for the wordmark to sink into. */
  padding-bottom: clamp(120px, 16vw, 230px);
  font-size: 0.86rem;
  overflow: hidden;
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1.1fr);
  gap: clamp(26px, 3.4vw, 48px);
  align-items: start;
}
@media (max-width: 900px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; } }

.foot-brand img { width: clamp(170px, 17vw, 230px); margin-bottom: 20px; }
.foot-brand p { margin: 0 0 16px; color: var(--mist); max-width: 34ch; }
.foot-reg { font-size: 0.78rem; line-height: 1.6; }
.foot-reg strong { color: var(--paper); font-weight: 500; }

.foot-col h2, .foot-cta h2 {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate);
  margin: 0 0 14px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-col a { color: var(--mist); text-decoration: none; transition: color 0.16s ease; }
.foot-col a:hover { color: var(--paper); }

.foot-cta p { margin: 0 0 14px; color: var(--mist); max-width: 26ch; }
.foot-tel { margin: 12px 0 0 !important; }
.foot-tel a {
  font-family: var(--mono); font-size: 0.92rem;
  color: var(--paper); text-decoration: none;
  border-bottom: 1px solid rgba(var(--hair), 0.2);
  padding-bottom: 2px;
}
.foot-tel a:hover { border-bottom-color: var(--signal); }
.foot-note { font-size: 0.76rem; color: var(--slate); margin-top: 12px !important; }

.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--slate); font-size: 0.8rem;
}
.foot-bottom p { margin: 0; }

/* The wordmark, sunk off the bottom edge. Clipped by the footer's overflow,
   so only the top of the letterforms shows — the name as a watermark rather
   than a second logo competing with the lockup above it. */
.foot-word {
  position: absolute;
  left: 50%; bottom: clamp(-34px, -3.4vw, -16px);
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  pointer-events: none;
  user-select: none;
  line-height: 0.78;
}
.foot-word span {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(4.4rem, 19vw, 17rem);
  letter-spacing: -0.045em;
  /* A dark olive derived from Signal: present enough to read, dim enough that
     it stays a texture and never competes with the real lockup. */
  background: linear-gradient(to bottom, #39405a 0%, #171b28 72%, transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- why us ---------- */

.bens { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.4vw, 16px); }
@media (min-width: 860px) { .bens { grid-template-columns: repeat(3, 1fr); } }

.ben {
  position: relative; overflow: hidden;
  min-height: clamp(330px, 38vw, 440px);
  border-radius: 20px;
  background: var(--ink);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.ben-in { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.6vw, 30px); }
.ben h3 { margin: 0 0 clamp(26px, 4vw, 54px); }
.ben p { margin: 0; color: var(--mist); font-size: 0.88rem; line-height: 1.62; max-width: 34ch; }
/* The first card's body sits under the heading, the third card's is pinned to
   the foot, so the three do not read as one block repeated three times.
   Qualified with the element because `.ben p` above is (0,1,1) and would
   otherwise beat a bare class on `margin`. */
.ben p.ben-push { margin-top: auto; }

.ben-glow {
  position: absolute; z-index: 1;
  width: 420px; height: 420px; border-radius: 50%;
  background: #3b2a74;
  filter: blur(80px); opacity: 0.6;
  top: 50%; left: -340px; transform: translateY(-50%);
}
.ben-glow-tr { top: -180px; right: -180px; left: auto; transform: none; width: 300px; height: 300px; }

.ben-live { background: var(--ink-1); }
/* The heading's large bottom margin is what separates the other two cards'
   title from their body. Here the diagram already does that, so keeping it
   would open a dead gap under the title. */
.ben-live .ben-in { flex: 1; justify-content: flex-end; padding-top: 0; }
.ben-live h3 { margin-bottom: 10px; }
.ben-viz { position: relative; width: 100%; height: 58%; overflow: hidden; }
.ben-viz svg { width: 100%; height: 100%; display: block; }

.viz-flow path {
  stroke-dasharray: 28 250;
  animation: viz-run 3.2s linear infinite;
}
.viz-flow path:nth-child(2) { animation-delay: -1.1s; }
.viz-flow path:nth-child(3) { animation-delay: -2.2s; }
@keyframes viz-run { to { stroke-dashoffset: -278; } }

.viz-hub { animation: viz-pulse 2.4s ease-in-out infinite; transform-origin: 130px 75px; }
@keyframes viz-pulse { 50% { r: 11; opacity: 0.75; } }

/* ---------- the spine ---------- */

.spine { list-style: none; margin: 0; padding: 0; position: relative; }

/* The stem of the mark, run down the page. */
.spine::before {
  content: ''; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(to bottom, var(--line), var(--line) 88%, transparent);
}

/* Padding rather than a margin on the heading: as the first child of the item
   a top margin collapses out of it, which drops the heading onto the item's
   own top edge and under anything positioned there. */
.spine li { position: relative; padding: 2px 0 clamp(30px, 4vw, 44px) clamp(44px, 5vw, 64px); }
.spine li:last-child { padding-bottom: 0; }

/* The node, and the only marker each step gets. A connected line of nodes
   already reads as an ordered run, so numbering them as well would be a
   second marker for one piece of information. */
.spine li::before {
  content: ''; position: absolute; left: 5px; top: 7px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--signal);
}
.band-alt .spine li::before { background: var(--ink-1); }

.spine h3 { margin: 0 0 9px; }
.spine p { margin: 0; color: var(--mist); max-width: 62ch; font-size: 0.93rem; }
.spine em { color: var(--paper); font-style: normal; font-weight: 500; }

/* ---------- clients ---------- */

/* Full-bleed: the logos run edge to edge rather than stopping at the content
   shell, which is what makes it read as a passing band instead of a row of
   images in a box. */
.logos {
  position: relative;
  overflow: hidden;
  margin-top: clamp(4px, 1vw, 12px);
  /* Faded at both ends so logos arrive and leave rather than appearing and
     vanishing at a hard edge. */
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.logos-track {
  display: flex;
  width: max-content;
  animation: logos-run 42s linear infinite;
}
.logos:hover .logos-track,
.logos:focus-within .logos-track { animation-play-state: paused; }
@keyframes logos-run { to { transform: translateX(-50%); } }

.logos-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(40px, 7vw, 96px);
  padding-right: clamp(40px, 7vw, 96px);
}
.logos-row li { flex: none; }
.logos-row img {
  /* Capped on both axes: the two logos have different aspect ratios, so
     matching height alone would make the wider one dominate. */
  height: clamp(24px, 2.8vw, 34px);
  width: auto;
  max-width: clamp(130px, 14vw, 190px);
  object-fit: contain;
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.logos-row img:hover { opacity: 1; }

/* ---------- contact ---------- */

.band-contact { background: var(--ink-1); }
/* Inside .shell, not on it: .shell is centred with an auto inline margin, so
   narrowing the shell itself would centre the whole block and the left-aligned
   text would read as an accidental indent. */
.contact-in { max-width: 46ch; }
.contact-in h2 { margin-bottom: 18px; }
.contact-in .lede { margin-bottom: 30px; }


/* ---------- light bands ----------
   Dark hero and footer, light content between them. The page gets real light
   in it without ever going pale, which is what a single flipped palette did.

   This works because every hairline and glass fill in the build resolves
   through `rgba(var(--hair), x)`: redefining --hair and the surface tokens on
   one wrapper re-skins everything inside it. Only values that were baked in
   rather than derived need naming again below. */
.band-light {
  --hair: 11, 13, 18;
  --ink: #ffffff;
  --ink-1: #f7f8fa;
  --ink-2: #eef1f6;
  --line: #e3e7ee;
  --paper: #0b0d12;
  --mist: #5a6577;
  --slate: #6b7489;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(11, 13, 18, 0.1);
  --glass-hi: #ffffff;

  --viz-fade: #f7f8fa;
  --viz-wire: #c7cedb;
  --viz-node: #ffffff;
  --viz-edge: #9aa5b8;

  background: #f7f8fa;
  color: var(--paper);
}

/* A hairline where a light band meets a dark one, so the join is a decision
   rather than an accident of two backgrounds touching. */
.band-light + .band:not(.band-light),
.band:not(.band-light) + .band-light { border-top: 1px solid rgba(var(--hair), 0.08); }

.band-light .lede,
.band-light .tile p,
.band-light .client p,
.band-light .sw-text em { color: var(--mist); }

/* The tilted panel: its surface and shadow were built for a dark section. */
.band-light .panel {
  background: linear-gradient(180deg, #ffffff 0%, #fdfdfe 55%, #f4f6fa 100%);
  border-color: rgba(11, 13, 18, 0.1);
  box-shadow:
    0 50px 90px -44px rgba(11, 13, 18, 0.3),
    0 2px 6px rgba(11, 13, 18, 0.05),
    inset 0 1px 0 #ffffff;
}
.band-light .pv-tr { background: #ffffff; }
.band-light .pv-ok { background: rgba(200, 240, 60, 0.38); color: #38560a; }
.band-light .pv-kw { color: #4e7a09; }
.band-light .pv-pn { color: #4a6b9a; }
.band-light .pv-st { color: #1f3d6b; }
.band-light .pv-block.lit { background: rgba(200, 240, 60, 0.7); }
.band-light .pv-col:nth-child(4) .pv-card { background: rgba(200, 240, 60, 0.7); }
.band-light .pv-bars i.on { background: #a8cf2b; }
.band-light .panel-live { color: #4e7a09; }

/* Signal has nowhere near the contrast as a word on a pale ground, so the
   selected row carries it as a filled surface instead. */
.band-light .sw[aria-selected='true'] .ico {
  background: var(--signal);
  border-color: rgba(11, 13, 18, 0.12);
  color: #0b0d12;
}
.band-light .sw[aria-selected='true'] .sw-ix { color: #4e7a09; }

.band-light .ben-live { background: var(--ink-2); }
.band-light .ben-glow { background: #b9a7f0; opacity: 0.34; }
.band-light .viz-flow { stroke: #a8cf2b; }

/* ---------- touch ----------
   On a touch screen a text link's own line box is about 22px tall, which is
   half the 44px a finger needs. Padding is added on pointer:coarse only, so
   the footer stays tight for a mouse. Small type is also lifted: 11px mono
   labels are legible on a desktop at arm's length and are not on a phone. */
@media (pointer: coarse) {
  .foot-col ul { gap: 2px; }
  .foot-col a {
    display: block;
    padding-block: 11px;
    min-height: 44px;
  }
  .nav a { padding-block: 12px; }
  .sheet a { padding-block: 15px; }

  .burger { width: 46px; height: 46px; }
  .foot-tel a { display: inline-block; padding-block: 11px; }

  .eyebrow { font-size: 0.82rem; }
  .strip-label { font-size: 0.78rem; }
  .sw-ix { font-size: 0.8rem; }
  .log-lines li, .panel-live, .panel-name, .pop { font-size: 0.8rem; }
  .pv-k, .pv-th { font-size: 0.8rem; }
  .foot-note, .foot-bottom { font-size: 0.84rem; }
  .chip-kick, .card-head { font-size: 0.76rem; }
}

/* ---------- entrance ---------- */

/* Scroll reveal. Children of a revealed block stagger via --i, so a section
   arrives as one movement rather than eight separate ones. */
.rv > * { opacity: 0; transform: translateY(18px); }
.rv.in > * {
  opacity: 1; transform: none;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.r { opacity: 0; transform: translateY(14px); }
.is-ready .r {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 1ms);
}

@media (prefers-reduced-motion: reduce) {
  .r, .rv > * { opacity: 1; transform: none; }
  .is-ready .r, .rv.in > * { transition: none; }
  .btn, .ico, .ico *, .sw, .sw * { transition: none; }
  .viz-flow path, .viz-hub, .strip-track, .panel-body.swap, .logos-track { animation: none; }
  .aura i, .led, .hub-halo, .log-dot, .log-lines li, .hero-word span { animation: none; }
}