/* ==========================================================================
   Backend & Platform Engineering — page visuals
   infrastructure pipeline (hero), request trace (intro), console rows (capabilities),
   isometric layer stack (architecture), launch-day timeline (reliability)
   ========================================================================== */
:root { --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --amber: #f5b43c; --violet-soft: #9b7cf0; }
.be-title { font-size: clamp(2.9rem, 0.4rem + 9vw, 11.5rem); }
.d-glow--be {
  inset: -4% 4% 42%;
  background:
    radial-gradient(36% 55% at 22% 56%, rgb(58 126 246 / 0.42), transparent 70%),
    radial-gradient(40% 60% at 55% 42%, rgb(107 63 212 / 0.48), transparent 70%),
    radial-gradient(30% 50% at 88% 58%, rgb(116 214 90 / 0.16), transparent 70%);
}

/* ==========================================================================
   Hero — API → services → database → queues → workers → infrastructure
   ========================================================================== */
.hx { --px: 0; --py: 0; position: relative; max-width: 80rem; margin-inline: auto; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.12); border-radius: clamp(1rem, 1.6vw, 1.75rem); background: #05060a; color: var(--white); }
.hx__bar { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
.hx__run { flex: 1; }
.hx__live { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--green); }
.hx__live i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.hx__body { position: relative; isolation: isolate; overflow: hidden; }
.hx__floor {
  position: absolute; left: -25%; right: -25%; bottom: 0; z-index: -1; height: 85%;
  background-image: linear-gradient(rgb(91 150 255 / 0.16) 1px, transparent 1px), linear-gradient(90deg, rgb(91 150 255 / 0.16) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(700px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(transparent, #000 55%, transparent);
  mask-image: linear-gradient(transparent, #000 55%, transparent);
}
.hx__canvas { position: relative; aspect-ratio: 1000 / 320; container-type: inline-size; translate: calc(var(--px) * 6px) calc(var(--py) * 4px); }
.hx__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx__wire { fill: none; stroke: rgb(255 255 255 / 0.14); stroke-width: 1.2; }
.hx__pulse { fill: none; stroke: var(--blue-bright); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.09 0.91; stroke-dashoffset: 0.09; opacity: 0; }
.hx__pulse--back { stroke: var(--violet-soft); }

.hn { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 9.6cqi; aspect-ratio: 1; translate: -50% -50%; }
.hn__glyph { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 2.2cqi; background: linear-gradient(160deg, #11141f, #07080d); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 2cqi 4cqi rgb(0 0 0 / 0.55); }
.hn__glyph::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(150deg, rgb(91 150 255 / 0.65), transparent 45%, rgb(155 124 240 / 0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hn__glyph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px var(--blue-bright), 0 0 3cqi rgb(58 126 246 / 0.5); opacity: 0; }
.hn__glyph svg { position: relative; width: 62%; height: 62%; overflow: visible; }
.hn__metric { position: absolute; left: 50%; bottom: calc(100% + 1cqi); translate: -50% 0; padding: 0.35cqi 0.8cqi; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 99em; background: rgb(255 255 255 / 0.04); font: 500 max(0.6rem, 1.05cqi)/1 var(--mono); color: rgb(255 255 255 / 0.7); white-space: nowrap; }
.hn__name { position: absolute; left: 50%; top: calc(100% + 1.3cqi); translate: -50% 0; font-size: max(0.8rem, 1.55cqi); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.hn__sub { position: absolute; left: 50%; top: calc(100% + 3.7cqi); translate: -50% 0; font: 500 max(0.58rem, 1cqi)/1 var(--mono); color: rgb(255 255 255 / 0.45); white-space: nowrap; }

.g-line { fill: none; stroke: rgb(255 255 255 / 0.82); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.g-line--dim { stroke: rgb(255 255 255 / 0.3); }
.g-req { fill: var(--blue-bright); }
.g-pod, .g-led { fill: var(--green); }
.g-write { fill: none; stroke: var(--blue-bright); stroke-width: 3; stroke-linecap: round; }
.g-msg { fill: var(--violet-soft); }
.g-track { fill: rgb(255 255 255 / 0.1); }
.g-fill { fill: var(--blue-bright); transform-box: fill-box; transform-origin: 0 50%; }

.hx__tele { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgb(255 255 255 / 0.08); background: rgb(5 6 10 / 0.75); }
.hx__tele > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.35rem 1rem; padding: 0.9rem 1.25rem; }
.hx__tele > span + span { border-left: 1px solid rgb(255 255 255 / 0.08); }
.hx__tele small { grid-column: 1 / -1; font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
.hx__tele b { font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; }
.hx__tele em { margin-left: 0.15em; font-size: 0.6em; font-style: normal; color: rgb(255 255 255 / 0.5); }
.hx__tele svg { width: 4.5rem; height: 1.25rem; overflow: visible; }
.hx__tele path { fill: none; stroke: var(--green); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: no-preference) {
  /* one request travels down the line, then its response comes back */
  .hx__pulse { animation: hx-fwd 9s linear infinite; animation-delay: calc(var(--k) * 0.9s + 0.6s); }
  .hx__pulse--back { animation-name: hx-back; animation-delay: calc((4 - var(--k)) * 0.9s + 5.1s); }
  .hn__glyph::after { animation: hx-hit 9s var(--ease-out) infinite; animation-delay: calc(var(--k) * 0.9s + 0.6s); }
  .g-req { animation: g-blink 1.8s ease-in-out infinite; animation-delay: calc(var(--j) * 0.3s); }
  .g-pod { animation: g-blink 2.4s ease-in-out infinite; animation-delay: calc(var(--j) * 0.8s); }
  .g-led { animation: g-blink 1.6s steps(1) infinite; animation-delay: calc(var(--j) * 0.37s); }
  .g-write { animation: g-write 2.8s var(--ease-in-out) infinite; }
  .g-msg { animation: g-slide 3.2s linear infinite; animation-delay: calc(var(--j) * -0.8s); }
  .g-fill { animation: g-work 2.6s var(--ease-in-out) infinite; animation-delay: calc(var(--j) * -0.9s); }
  .d-hero.is-paused .hx *, .d-hero.is-paused .hx *::after { animation-play-state: paused; }
  @keyframes hx-fwd { 0% { stroke-dashoffset: 0.09; opacity: 1; } 10% { stroke-dashoffset: -0.91; opacity: 1; } 10.01%, 100% { opacity: 0; } }
  @keyframes hx-back { 0% { stroke-dashoffset: -0.91; opacity: 1; } 10% { stroke-dashoffset: 0.09; opacity: 1; } 10.01%, 100% { opacity: 0; } }
  @keyframes hx-hit { 0% { opacity: 0; } 3% { opacity: 1; } 12%, 100% { opacity: 0; } }
  @keyframes g-blink { 50% { opacity: 0.25; } }
  @keyframes g-write { 0% { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 80% { translate: 0 11px; opacity: 1; } 100% { translate: 0 11px; opacity: 0; } }
  @keyframes g-slide { from { translate: 0 0; } to { translate: 56px 0; } }
  @keyframes g-work { 0% { scale: 0 1; opacity: 1; } 75% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
}

/* ==========================================================================
   Intro — one tap, the trace underneath it
   ========================================================================== */
.be-intro__eyebrow { margin-bottom: 1.5rem; }
.be-intro__title { font-size: clamp(2rem, 0.6rem + 4.3vw, 6rem); }
.trc { max-width: 72rem; margin: clamp(3.5rem, 6.5vw, 6.5rem) auto 0; overflow: hidden; border: 1px solid var(--border-light); border-radius: clamp(1rem, 1.6vw, 1.5rem); background: var(--white); text-align: left; box-shadow: 0 2rem 4rem -2.5rem rgb(0 0 0 / 0.25); }
.trc__top { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); border-bottom: 1px solid var(--border-light); }
.trc__top > div { display: grid; align-content: start; gap: 0.75rem; padding: 1.25rem clamp(1rem, 2vw, 1.75rem); }
.trc__top small { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8a; }
.trc__surface { border-right: 1px solid var(--border-light); background: #f7f7f5; }
.trc__ui { display: flex; align-items: center; gap: 0.9rem; }
.trc__btn { padding: 0.65rem 1.2rem; border-radius: 0.7rem; background: linear-gradient(135deg, var(--purple), var(--blue)); color: var(--white); font-size: 0.95rem; font-weight: 600; box-shadow: 0 0.5rem 1rem -0.5rem rgb(58 126 246 / 0.6); }
.trc__ok { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: #2f7a1f; }
.trc__ok i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--green); }
.trc__req p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.trc__req code { font: 500 clamp(1rem, 0.85rem + 0.5vw, 1.35rem)/1.2 var(--mono); }
.trc__req code b { font-weight: 700; color: var(--blue); }
.trc__req span { font: 500 0.8rem/1 var(--mono); color: #5e5e5e; }

.wf { --name: minmax(0, 15rem); --svc: 7.5rem; padding: 1rem clamp(1rem, 2vw, 1.75rem) 0.5rem; }
.wf__scale, .wf__row { display: grid; grid-template-columns: var(--name) var(--svc) minmax(0, 1fr); align-items: center; column-gap: 1rem; }
.wf__scale { padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); }
.wf__ticks { position: relative; grid-column: 3; height: 0.8rem; font: 500 0.68rem/1 var(--mono); color: #8a8a8a; }
.wf__ticks span { position: absolute; left: calc(var(--t) / 320 * 100%); white-space: nowrap; }
.wf__row { padding-block: 0.38rem; border-bottom: 1px solid rgb(0 0 0 / 0.04); }
.wf__name { overflow: hidden; padding-left: calc(var(--lv) * 1.1rem); font: 500 0.82rem/1.2 var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.wf__name::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-left: 1px solid #b5b5b5; border-bottom: 1px solid #b5b5b5; vertical-align: 0.15em; opacity: min(var(--lv), 1); }
.wf__svc { overflow: hidden; font: 500 0.72rem/1 var(--mono); color: #8a8a8a; white-space: nowrap; text-overflow: ellipsis; }
.wf__track { position: relative; height: 1.3rem; background: linear-gradient(90deg, rgb(0 0 0 / 0.07) 1px, transparent 1px) 0 0 / 31.25% 100%; }
.wf__track i { position: absolute; top: 0.25rem; bottom: 0.25rem; left: calc(var(--s) / 320 * 100%); width: max(3px, calc(var(--d) / 320 * 100%)); border-radius: 3px; background: var(--c); transform-origin: 0 50%; }
.wf__track em { position: absolute; top: 50%; left: calc((var(--s) + var(--d)) / 320 * 100% + 0.45rem); translate: 0 -50%; font: 500 0.68rem/1 var(--mono); font-style: normal; color: #6a6a6a; white-space: nowrap; }
.wf__split { margin-block: 0.25rem; padding: 0.5rem 0 0.35rem; border-top: 1px dashed rgb(58 126 246 / 0.5); font: 500 0.72rem/1.4 var(--mono); color: var(--blue); }
.wf__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 0.9rem clamp(1rem, 2vw, 1.75rem) 1.1rem; border-top: 1px solid var(--border-light); font-size: 0.8rem; color: #5e5e5e; }
.wf__legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.wf__legend li::before { content: ""; width: 0.75rem; height: 0.45rem; border-radius: 2px; background: var(--c); }
.wf--api { --c: var(--blue); }
.wf--svc { --c: #8a63e8; }
.wf--data { --c: #3fae6a; }
.wf--queue { --c: #e59a2f; }
.wf--ext { --c: #e0589a; }

@media (prefers-reduced-motion: no-preference) {
  .js .trc .wf__track i { transform: scaleX(0); transition: transform 0.45s var(--ease-out); transition-delay: calc(var(--s) * 6ms + 0.5s); }
  .js .trc .wf__track em, .js .trc .trc__ok { opacity: 0; transition: opacity 0.4s; transition-delay: calc((var(--s) + var(--d)) * 6ms + 0.6s); }
  .js .trc .trc__ok { transition-delay: 1.7s; }
  .js .trc.is-in .wf__track i { transform: none; }
  .js .trc.is-in :is(.wf__track em, .trc__ok) { opacity: 1; }
  .trc.is-in .trc__btn { animation: be-press 0.5s var(--ease-out) 0.25s; }
  @keyframes be-press { 40% { scale: 0.94; } }
}

/* ==========================================================================
   Capabilities — large rows, each with a console line on hover
   ========================================================================== */
.caps2 { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.caps2__list { margin-top: clamp(3rem, 5.5vw, 6rem); border-top: 1px solid rgb(255 255 255 / 0.2); }
.cap { position: relative; isolation: isolate; display: grid; grid-template-columns: clamp(3.5rem, 6vw, 6rem) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 0.75rem clamp(1rem, 3vw, 3.5rem); padding-block: clamp(1.4rem, 2.4vw, 2.4rem); border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.cap::before { content: ""; position: absolute; inset: 0 calc(-1 * clamp(0.75rem, 2vw, 1.5rem)); z-index: -1; border-radius: 1rem; background: linear-gradient(90deg, rgb(58 126 246 / 0.1), rgb(107 63 212 / 0.05) 55%, transparent); opacity: 0; transition: opacity 0.45s var(--ease-soft); }
.cap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--purple), var(--blue-bright)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-out); }
.cap__num { display: flex; align-items: center; gap: 0.7rem; font: 600 var(--fs-small)/1 var(--mono); letter-spacing: 0.04em; color: rgb(255 255 255 / 0.4); transition: color 0.35s; }
.cap__led { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgb(255 255 255 / 0.18); transition: background-color 0.3s, box-shadow 0.3s; }
.cap__title { font-size: clamp(1.9rem, 0.9rem + 2.7vw, 4.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.045em; transition: transform 0.7s var(--ease-out), color 0.35s; }
.cap__text { max-width: 30em; margin-top: 0.6rem; font-size: clamp(0.92rem, 0.85rem + 0.2vw, 1.05rem); line-height: 1.45; color: rgb(255 255 255 / 0.55); }
.cap__aside { display: grid; align-items: center; min-width: 0; min-height: 3rem; }
.cap__tags { grid-area: 1 / 1; display: flex; flex-wrap: wrap; gap: 0.4rem; transition: opacity 0.35s, transform 0.5s var(--ease-out); }
.cap__tags li { padding: 0.4rem 0.75rem; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 99em; font: 500 0.76rem/1 var(--mono); color: rgb(255 255 255 / 0.7); }
.cap__out { grid-area: 1 / 1; display: block; min-width: 0; overflow: hidden; padding: 0.75rem 1rem; border-radius: 0.7rem; background: #0b0d14; box-shadow: inset 0 0 0 1px rgb(91 150 255 / 0.25); font: 500 clamp(0.72rem, 0.66rem + 0.2vw, 0.85rem)/1.4 var(--mono); color: #b9f5a6; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: opacity 0.3s; }
.cap__out::before { content: "$ "; color: rgb(255 255 255 / 0.35); }
.cap__out span { display: inline-block; vertical-align: bottom; }
.cap__out b { font-weight: 700; color: var(--blue-bright); }
.cap__out i { font-style: normal; color: rgb(255 255 255 / 0.4); }

@media (hover: hover) {
  .cap:hover::before { opacity: 1; }
  .cap:hover::after { transform: none; }
  .cap:hover .cap__num { color: var(--white); }
  .cap:hover .cap__led { background: var(--green); box-shadow: 0 0 0 4px rgb(116 214 90 / 0.2); }
  .cap:hover .cap__title { color: var(--white); transform: translateX(0.6rem); }
  .caps2__list:hover .cap:not(:hover) .cap__title { color: rgb(255 255 255 / 0.38); }
  .cap:hover .cap__tags { opacity: 0; transform: translate3d(0, -0.4rem, 0); }
  .cap:hover .cap__out { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .cap__out span { clip-path: inset(0 100% 0 0); }
    .cap:hover .cap__out span { clip-path: inset(0); transition: clip-path 0.9s steps(28) 0.1s; }
  }
}
@media (hover: none) {
  .cap__aside { gap: 0.6rem; }
  .cap__tags, .cap__out { grid-area: auto; }
  .cap__out { opacity: 1; }
}

/* ==========================================================================
   System architecture — an isometric stack that opens at the selected layer
   ========================================================================== */
.arch2 { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 9vw, 10rem); overflow-x: clip; }
.arch2__grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); align-items: center; gap: 2rem clamp(2rem, 4vw, 5rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.arch2__tabs { border-top: 1px solid var(--black); }
.arch2__tab { width: 100%; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline; column-gap: 0.75rem; padding-block: clamp(0.65rem, 1.1vw, 0.95rem); border-bottom: 1px solid var(--border-light); text-align: left; color: #9a9a9a; transition: color 0.35s; }
.arch2__n { font: 600 var(--fs-small)/1 var(--mono); transition: color 0.35s; }
.arch2__name { font-size: clamp(1.4rem, 0.9rem + 1.3vw, 2.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; transition: transform 0.6s var(--ease-out); }
.arch2__sub { grid-column: 2; margin-top: 0.25rem; font: 500 0.72rem/1 var(--mono); color: #a5a5a5; }
.arch2__tab:hover { color: #4d4d4d; }
.arch2__tab[aria-selected="true"] { color: var(--black); }
.arch2__tab[aria-selected="true"] .arch2__n { color: var(--blue); }
.arch2__tab[aria-selected="true"] .arch2__name { transform: translateX(0.5rem); }
.arch2__tab:focus-visible { outline-offset: -2px; }
.arch2__panels { margin-top: 1.5rem; }
.arch2__panels p { max-width: 30em; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem); line-height: 1.5; color: #4d4d4d; }
.arch2__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.arch2__stats div { padding-top: 0.6rem; border-top: 1px solid var(--border-light); }
.arch2__stats dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; }
.arch2__stats dd { margin-top: 0.35rem; font: 600 clamp(1.05rem, 0.9rem + 0.4vw, 1.4rem)/1 var(--mono); letter-spacing: -0.02em; }

.arch2__stage { position: relative; margin: 0; aspect-ratio: 1 / 0.92; container-type: inline-size; }
.iso {
  --pw: 52cqi; --ph: 32cqi; --gap: 10.5cqi; --open: 6cqi;
  position: absolute; left: 50%; top: 50%; width: var(--pw); height: var(--ph);
  margin: calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2);
  transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-38deg);
}
.iso__plate {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 2.2cqi 2.4cqi 2.4cqi;
  border: 1px solid rgb(0 0 0 / 0.14); border-radius: 1.6cqi;
  background-color: rgb(255 255 255 / 0.8); box-shadow: inset 0 0 0 0.45cqi rgb(255 255 255 / 0.5);
  transform-style: preserve-3d; transform: translateZ(calc((2.5 - var(--i)) * var(--gap) + var(--shift, 0cqi)));
  transition: transform 0.8s var(--ease-out), background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.iso__label { display: flex; align-items: baseline; gap: 0.8cqi; font: 600 1.35cqi/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #6a6a6a; }
.iso__label b { color: var(--blue); }
.iso__tiles { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 1.1cqi; margin-top: 1.8cqi; transition: opacity 0.4s; }
.iso__tiles > span { display: flex; align-items: center; justify-content: center; gap: 0.7cqi; min-width: 0; padding: 0.8cqi 1cqi; border: 1px solid rgb(0 0 0 / 0.12); border-radius: 1cqi; background: #f3f3f1; font-size: 1.45cqi; font-weight: 600; white-space: nowrap; }
.iso__tiles--client { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.iso__tiles--gw, .iso__tiles--svc, .iso__tiles--wk, .iso__tiles--infra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iso__tiles--db { grid-template-columns: 1.3fr 1fr 1fr; }
.iso__tiles .is-wide, .iso__tiles .is-queue { grid-column: 1 / -1; justify-content: space-between; }
.iso__tiles .is-wide { border-color: #141414; background: #141414; color: var(--white); }
.iso__tiles .is-wide em { font: 500 1.1cqi/1 var(--mono); font-style: normal; color: rgb(255 255 255 / 0.6); }
.iso__tiles .is-ghost { border-style: dashed; background: transparent; color: #8a8a8a; }
.iso__tiles .is-primary { grid-row: span 2; border-color: rgb(58 126 246 / 0.4); background: rgb(58 126 246 / 0.1); }
.iso__tiles--db span:last-child { grid-column: span 2; }
.iso__msgs { display: flex; gap: 0.6cqi; }
.iso__msgs i { width: 2.2cqi; height: 2.2cqi; border-radius: 0.4cqi; background: var(--violet-soft); }
.iso__msgs i:nth-child(n+4) { opacity: 0.4; }
.iso__tiles--infra span { flex-direction: column; gap: 0.9cqi; }
.iso__tiles--infra b { font: 600 1.1cqi/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #6a6a6a; }
.iso__nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8cqi; }
.iso__nodes i { position: relative; width: 2.6cqi; aspect-ratio: 1; border-radius: 0.5cqi; background: #e3e8df; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.iso__nodes i::after { content: ""; position: absolute; top: 0.4cqi; right: 0.4cqi; width: 0.55cqi; aspect-ratio: 1; border-radius: 50%; background: var(--green); }
.ic { flex: none; width: 1.7cqi; height: 1.7cqi; border: 0.22cqi solid currentColor; border-radius: 0.35cqi; }
.ic--phone { width: 1.1cqi; }
.ic--api { border-radius: 50%; }
.ic--db { border-radius: 50% / 30%; }
.ic--cache { width: 1.3cqi; height: 1.3cqi; rotate: 45deg; }

/* beams run from a plate down to the one below; they stretch when the stack opens */
.iso__beam { position: absolute; left: var(--bx); top: var(--by); width: 0.7cqi; height: calc(var(--gap) + var(--stretch, 0cqi)); margin-left: -0.3cqi; overflow: hidden; background: rgb(58 126 246 / 0.5); transform-origin: 50% 0; transform: rotateX(-90deg); transition: height 0.8s var(--ease-out); }
.iso__beam::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(transparent, var(--blue-bright), transparent); translate: 0 -100%; }
.iso__beam--up { background: rgb(155 124 240 / 0.4); }
.iso__beam--up::after { background: linear-gradient(transparent, var(--violet-soft), transparent); }

/* selection: plates above lift, plates below drop */
.arch2[data-active="1"] .iso__plate:nth-child(-n+1),
.arch2[data-active="2"] .iso__plate:nth-child(-n+2),
.arch2[data-active="3"] .iso__plate:nth-child(-n+3),
.arch2[data-active="4"] .iso__plate:nth-child(-n+4),
.arch2[data-active="5"] .iso__plate:nth-child(-n+5) { --shift: var(--open); }
.arch2[data-active="0"] .iso__plate:nth-child(n+2),
.arch2[data-active="1"] .iso__plate:nth-child(n+3),
.arch2[data-active="2"] .iso__plate:nth-child(n+4),
.arch2[data-active="3"] .iso__plate:nth-child(n+5),
.arch2[data-active="4"] .iso__plate:nth-child(n+6) { --shift: calc(var(--open) * -1); }
.arch2[data-active="0"] .iso__plate:nth-child(1),
.arch2[data-active="1"] .iso__plate:is(:nth-child(1), :nth-child(2)),
.arch2[data-active="2"] .iso__plate:is(:nth-child(2), :nth-child(3)),
.arch2[data-active="3"] .iso__plate:is(:nth-child(3), :nth-child(4)),
.arch2[data-active="4"] .iso__plate:is(:nth-child(4), :nth-child(5)),
.arch2[data-active="5"] .iso__plate:nth-child(5) { --stretch: var(--open); }
.arch2[data-active] .iso__tiles { opacity: 0.45; }
.iso__plate:is([data-active="0"] :nth-child(1), [data-active="1"] :nth-child(2), [data-active="2"] :nth-child(3), [data-active="3"] :nth-child(4), [data-active="4"] :nth-child(5), [data-active="5"] :nth-child(6)) {
  border-color: var(--blue); background-color: rgb(238 244 255 / 0.96); box-shadow: inset 0 0 0 0.45cqi rgb(255 255 255 / 0.5), 0 0 0 0.6cqi rgb(58 126 246 / 0.16);
}
.iso__plate:is([data-active="0"] :nth-child(1), [data-active="1"] :nth-child(2), [data-active="2"] :nth-child(3), [data-active="3"] :nth-child(4), [data-active="4"] :nth-child(5), [data-active="5"] :nth-child(6)) .iso__tiles { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .iso__plate { cursor: pointer; } }

@media (prefers-reduced-motion: no-preference) {
  .iso__beam::after { animation: iso-down 2.4s linear infinite; animation-delay: calc(var(--k) * 0.4s); }
  .iso__beam--up::after { animation-name: iso-up; animation-delay: calc((5 - var(--k)) * 0.4s); }
  .iso__msgs i { animation: g-blink 1.6s ease-in-out infinite; }
  .iso__msgs i:nth-child(2) { animation-delay: 0.3s; }
  .iso__msgs i:nth-child(3) { animation-delay: 0.6s; }
  .arch2.is-paused .iso__beam::after, .arch2.is-paused .iso__msgs i { animation-play-state: paused; }
  @keyframes iso-down { from { translate: 0 -100%; } to { translate: 0 250%; } }
  @keyframes iso-up { from { translate: 0 250%; } to { translate: 0 -100%; } }
}
@media (prefers-reduced-motion: reduce) {
  .iso__plate, .iso__beam { transition: none; }
}

/* ==========================================================================
   Reliability — a launch-day hour, one lane per pillar
   ========================================================================== */
.rel { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.rel__grid { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); align-items: start; gap: 2rem clamp(2rem, 4vw, 4.5rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.rel__tabs { border-top: 1px solid rgb(255 255 255 / 0.2); }
.rel__tab { width: 100%; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; column-gap: 0.7rem; padding-block: clamp(0.7rem, 1.2vw, 0.95rem); border-bottom: 1px solid rgb(255 255 255 / 0.1); text-align: left; color: rgb(255 255 255 / 0.42); transition: color 0.35s; }
.rel__n { font: 600 var(--fs-micro)/1 var(--mono); }
.rel__name { font-size: clamp(1.35rem, 0.9rem + 1.2vw, 2.3rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; transition: transform 0.6s var(--ease-out); }
.rel__stat { grid-column: 2; margin-top: 0.3rem; font: 500 0.74rem/1.2 var(--mono); color: rgb(255 255 255 / 0.35); transition: color 0.35s; }
.rel__tab:hover { color: rgb(255 255 255 / 0.8); }
.rel__tab[aria-selected="true"] { color: var(--white); }
.rel__tab[aria-selected="true"] .rel__n { color: var(--blue-bright); }
.rel__tab[aria-selected="true"] .rel__stat { color: var(--green); }
.rel__tab[aria-selected="true"] .rel__name { transform: translateX(0.5rem); }
.rel__tab:focus-visible { outline-offset: -2px; }
.rel__panels { margin-top: 1.5rem; }
.rel__panels p { font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / 0.7); }
.rel__facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.rel__facts li { padding: 0.4rem 0.7rem; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 99em; font: 500 0.72rem/1 var(--mono); color: rgb(255 255 255 / 0.72); }

.rel__board { --label: clamp(7.5rem, 11vw, 10rem); margin: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.1); border-radius: clamp(1rem, 1.6vw, 1.5rem); background: #07080c; }
.rel__bar { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
.rel__run { flex: 1; }
.rel__slo { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--green); white-space: nowrap; }
.rel__slo i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.rel__lanes { position: relative; padding: 0.5rem 1.2rem 0; }
.lane { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); border-bottom: 1px solid rgb(255 255 255 / 0.06); transition: background-color 0.35s; }
.lane__label { display: grid; align-content: center; gap: 0.3rem; padding-right: 1rem; }
.lane__label b { font-size: 0.95rem; font-weight: 600; color: rgb(255 255 255 / 0.55); transition: color 0.35s; }
.lane__label small { font: 500 0.66rem/1.2 var(--mono); color: rgb(255 255 255 / 0.35); }
.lane__plot { position: relative; height: var(--h, 4.5rem); border-left: 1px solid rgb(255 255 255 / 0.08); background: linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%; transition: opacity 0.35s; }
.lane--scale { --h: 9rem; }
.lane--perf { --h: 5rem; }
.lane--obs { --h: 4.5rem; }
.lane--rec { --h: 5rem; }
.lane__plot svg { position: absolute; left: 0; top: 0.5rem; width: 100%; height: calc(100% - 0.85rem); overflow: visible; }
.ch-area { fill: rgb(58 126 246 / 0.16); }
.ch-line, .ch-lat { fill: none; stroke: var(--blue-bright); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ch-lat { stroke: var(--green); }
.ch-step { fill: none; stroke: var(--violet-soft); stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ch-bars rect { fill: rgb(255 255 255 / 0.2); }
.ch-bars .is-burst { fill: #e0589a; }
.ch-budget { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.lane__note { position: absolute; left: var(--at); top: var(--top); z-index: 1; padding: 0.22rem 0.5rem; border-radius: 0.35rem; background: rgb(7 8 12 / 0.85); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); font: 500 0.68rem/1 var(--mono); color: var(--white); white-space: nowrap; }
.lane__note--dim { color: rgb(255 255 255 / 0.55); }
.lane--obs .lane__plot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(255 255 255 / 0.12); }
.ev { position: absolute; left: var(--at); top: 50%; }
.ev i { position: absolute; left: -0.35rem; top: -0.35rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 3px #07080c; }
.ev--warn i { background: var(--amber); }
.ev--ok i { background: var(--green); }
.ev em { position: absolute; left: -0.3rem; bottom: 0.75rem; font: 500 0.66rem/1 var(--mono); font-style: normal; color: rgb(255 255 255 / 0.75); white-space: nowrap; }
.ev--low em { top: 0.75rem; bottom: auto; }
.zone { position: absolute; left: 0; right: 0; top: calc(1.75rem + var(--row) * 1rem); height: 0.45rem; }
.zone i { position: absolute; top: 0; bottom: 0; left: var(--from); width: calc(var(--to) - var(--from)); border-radius: 99em; background: rgb(116 214 90 / 0.6); }
.zone .is-fail { background: var(--amber); }
.zone .is-off { background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.2) 0 4px, transparent 4px 8px); }
.rel__cursor { position: absolute; top: 0.5rem; bottom: 0; left: calc(1.2rem + var(--label)); right: 1.2rem; pointer-events: none; }
.rel__cursor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 0.45) 0 1px, transparent 1px); opacity: 0; }
.rel__axis { display: flex; justify-content: space-between; padding: 0.6rem 1.2rem 0.9rem calc(1.2rem + var(--label)); font: 500 0.68rem/1 var(--mono); color: rgb(255 255 255 / 0.4); }

.rel[data-active] .lane__plot { opacity: 0.4; }
.lane:is([data-active="0"] [data-pick="0"], [data-active="1"] [data-pick="1"], [data-active="2"] [data-pick="2"], [data-active="3"] [data-pick="3"], [data-active="4"] [data-pick="4"]) { background-color: rgb(58 126 246 / 0.07); }
.lane:is([data-active="0"] [data-pick="0"], [data-active="1"] [data-pick="1"], [data-active="2"] [data-pick="2"], [data-active="3"] [data-pick="3"], [data-active="4"] [data-pick="4"]) .lane__plot { opacity: 1; }
.lane:is([data-active="0"] [data-pick="0"], [data-active="1"] [data-pick="1"], [data-active="2"] [data-pick="2"], [data-active="3"] [data-pick="3"], [data-active="4"] [data-pick="4"]) .lane__label b { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .lane { cursor: pointer; } }

@media (prefers-reduced-motion: no-preference) {
  .js .rel__board .lane__plot svg, .js .rel__board .zone { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease-in-out) 0.3s; }
  .js .rel__board.is-in .lane__plot svg, .js .rel__board.is-in .zone { clip-path: inset(0); }
  .rel__cursor::after { opacity: 1; animation: rel-sweep 12s linear infinite; }
  .rel.is-paused .rel__cursor::after { animation-play-state: paused; }
  @keyframes rel-sweep { from { transform: translateX(0); } to { transform: translateX(100%); } }
}

/* ==========================================================================
   Process — seven stages wrap earlier than the shared six
   ========================================================================== */
@media (min-width: 64.0625em) and (max-width: 80em) {
  .be-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 3.5rem; padding-top: 0; }
  .be-steps::before, .be-steps::after { display: none; }
  .be-steps .d-step { padding-top: 1.5rem; border-top: 1px solid rgb(0 0 0 / 0.16); }
  .be-steps .d-step::before { top: -6px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64em) {
  .cap { grid-template-columns: 3rem minmax(0, 1fr); }
  .cap__aside { grid-column: 2; }
  .arch2__grid, .rel__grid { grid-template-columns: minmax(0, 1fr); }
  .arch2__stage { max-width: 44rem; width: 100%; margin-inline: auto; }
}

@media (max-width: 48em) {
  .hx__bar .hx__live { display: none; }
  .hx__floor, .hx__links { display: none; }
  .hx__canvas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5.25rem 1rem; aspect-ratio: auto; padding: 2.5rem 1rem 3.5rem; container-type: normal; translate: none; }
  .hn { position: relative; left: auto; top: auto; width: 4.75rem; margin-inline: auto; translate: none; }
  .hn__glyph { border-radius: 1.1rem; }
  .hn__metric { bottom: calc(100% + 0.45rem); padding: 0.2rem 0.45rem; font-size: 0.6rem; }
  .hn__name { top: calc(100% + 0.55rem); font-size: 0.9rem; }
  .hn__sub { top: calc(100% + 1.75rem); font-size: 0.6rem; }
  .hx__tele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx__tele > span:nth-child(3) { border-left: 0; }
  .hx__tele > span:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / 0.08); }
  .hx__tele svg { display: none; }

  .trc__top { grid-template-columns: minmax(0, 1fr); }
  .trc__surface { border-right: 0; border-bottom: 1px solid var(--border-light); }
  .wf__scale, .wf__row { grid-template-columns: minmax(0, 1fr); row-gap: 0.3rem; }
  .wf__ticks { grid-column: 1; }
  .wf__svc { display: none; }

  .cap { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
  .cap__aside { grid-column: 1; }
  .cap__out { white-space: normal; }
  .cap__out span { display: inline; }

  .arch2__stats { gap: 0.75rem; }
  .arch2__stage { aspect-ratio: 1 / 1.02; }
  .iso { --pw: 64cqi; --ph: 40cqi; --gap: 11cqi; --open: 6cqi; }

  .rel__scroll { overflow-x: auto; }
  .rel__lanes, .rel__axis { min-width: 40rem; }
  .rel__slo { display: none; }
}