/* ==========================================================================
   Full-Stack Product Development — page visuals
   blueprint section (hero), journey line (intro), drawing sheets (what we build),
   editorial stack, interactive system map, layered product screens (one team)
   ========================================================================== */
.fs-title { font-size: clamp(2.9rem, 0.4rem + 9vw, 11.5rem); }
.d-glow--fs {
  inset: -6% 6% 40%;
  background:
    radial-gradient(40% 58% at 24% 52%, rgb(58 126 246 / 0.46), transparent 70%),
    radial-gradient(40% 60% at 70% 42%, rgb(107 63 212 / 0.5), transparent 70%),
    radial-gradient(26% 40% at 92% 70%, rgb(116 214 90 / 0.14), transparent 70%);
}
:root { --mono: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ==========================================================================
   Hero — the product drawn as a building section
   floors are layers, shafts carry requests down and responses up
   ========================================================================== */
.bp {
  --px: 0; --py: 0;
  --lvl-w: clamp(8rem, 13vw, 12rem);
  --pad: clamp(1rem, 2.5vw, 2.5rem);
  position: relative; max-width: 76rem; margin-inline: auto;
  border: 1px solid rgb(91 150 255 / 0.22); border-radius: clamp(1rem, 1.6vw, 1.75rem);
  background: #06070c; color: var(--white); overflow: hidden;
}
.bp__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); }
.bp__run { flex: 1; }
.bp__rev { color: var(--green); }
.bp__body {
  position: relative;
  padding: clamp(0.5rem, 1vw, 0.9rem) var(--pad) clamp(1.25rem, 2vw, 1.75rem);
  background-image:
    linear-gradient(rgb(91 150 255 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(91 150 255 / 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* hatched foundation line under L1 */
.bp__body::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0.6rem; height: 0.5rem; border-top: 1px solid rgb(91 150 255 / 0.45); background: repeating-linear-gradient(-45deg, rgb(91 150 255 / 0.35) 0 1px, transparent 1px 7px); }

.bp__shafts { position: absolute; inset: 0 var(--pad) 0 calc(var(--lvl-w) + var(--pad)); pointer-events: none; }
.bp__shaft { position: absolute; top: 1.75rem; bottom: 2rem; left: 33.333%; width: 3px; margin-left: -1.5px; overflow: hidden; }
.bp__shaft--up { left: 66.667%; }
.bp__shaft::before { content: ""; position: absolute; left: 1px; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(rgb(91 150 255 / 0.45) 0 4px, transparent 4px 8px); }
.bp__shaft::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 44%, var(--blue-bright) 47% 53%, transparent 56%); transform: translateY(-56%); }
.bp__shaft--up::after { background: linear-gradient(transparent 44%, var(--green) 47% 53%, transparent 56%); }

.bp__floor { position: relative; display: grid; grid-template-columns: var(--lvl-w) minmax(0, 1fr); align-items: center; padding-block: clamp(0.7rem, 1.2vw, 1rem); border-bottom: 1px dashed rgb(91 150 255 / 0.2); }
.bp__floor--base { border-bottom: 0; }
.bp__lvl { display: grid; gap: 0.3rem; font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.15rem); font-weight: 600; letter-spacing: -0.02em; }
.bp__lvl b { font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: 0.12em; color: var(--blue-bright); }
.bp__items {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  justify-items: center; align-items: center; gap: 0.75rem;
  translate: calc(var(--px) * var(--f) * 3px) calc(var(--py) * var(--f) * 1.5px);
}
.bp__node, .bp__svc, .bp__route, .bp__pipe { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 0.6rem; background: #0b0d16; font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.bp__node svg { flex: none; width: 1rem; height: 1rem; color: var(--blue-bright); }
.bp__node--hot { border-color: rgb(91 150 255 / 0.55); background: linear-gradient(160deg, #221a47, #0f1d3f); }
.bp__route { font: 500 0.75rem/1 var(--mono); color: rgb(255 255 255 / 0.75); }
.bp__route em { font-style: normal; font-weight: 700; color: var(--green); }
.bp__route:last-child em { color: #b79cff; }
.bp__svc i, .bp__pulse { flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--green); }
.bp__pulse { position: relative; }
.bp__pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0; }
.bp__pipe { position: relative; gap: 0; padding: 0; overflow: hidden; border-radius: 99em; font: 500 0.72rem/1 var(--mono); color: rgb(255 255 255 / 0.75); }
.bp__pipe span { padding: 0.55rem 0.75rem; }
.bp__pipe span + span { border-left: 1px solid rgb(255 255 255 / 0.1); }
.bp__pipe i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, rgb(58 126 246 / 0.4) 50%, transparent 65%); transform: translateX(-100%); }

@media (prefers-reduced-motion: no-preference) {
  .js .bp__floor { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  .is-loaded .bp__floor { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-soft), transform 1s var(--ease-out); transition-delay: calc(1s + var(--f) * 140ms); }
  .bp__shaft::after { animation: bp-down 3.4s linear infinite; }
  .bp__shaft--up::after { animation-name: bp-up; animation-delay: -1.7s; }
  .bp__svc i { animation: bp-blink 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * -0.6s); }
  .bp__pipe i { animation: bp-sweep 2.8s var(--ease-in-out) infinite; }
  .bp__pulse::after { animation: bp-ping 2s var(--ease-out) infinite; }
  .d-hero.is-paused .bp *, .d-hero.is-paused .bp *::before, .d-hero.is-paused .bp *::after { animation-play-state: paused; }
  @keyframes bp-down { from { transform: translateY(-56%); } to { transform: translateY(56%); } }
  @keyframes bp-up { from { transform: translateY(56%); } to { transform: translateY(-56%); } }
  @keyframes bp-blink { 50% { opacity: 0.35; } }
  @keyframes bp-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  @keyframes bp-ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.2); opacity: 0; } }
}

/* ==========================================================================
   Intro — strategy to live, one line
   ========================================================================== */
.journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(3.5rem, 6.5vw, 7rem); text-align: left; }
.journey li { position: relative; display: grid; align-content: start; gap: 0.35rem; padding-right: 1rem; }
/* one segment per step, from this dot to the next */
.journey li:not(:last-child)::before,
.journey li:not(:last-child)::after { content: ""; position: absolute; left: 0.45rem; right: -0.45rem; top: 0.45rem; height: 1px; background: rgb(0 0 0 / 0.18); }
.journey li:not(:last-child)::after { height: 2px; margin-top: -0.5px; background: linear-gradient(90deg, var(--purple), var(--blue)); transform-origin: 0 50%; }
.journey__dot { position: relative; z-index: 1; width: 0.9rem; height: 0.9rem; margin-bottom: 0.9rem; border: 1.5px solid var(--black); border-radius: 50%; background: var(--blue); border-color: var(--blue); }
.journey b { font-size: clamp(1.05rem, 0.85rem + 0.5vw, 1.45rem); font-weight: 600; letter-spacing: -0.03em; }
.journey small { font-size: 0.88rem; color: #6a6a6a; }
.journey__live .journey__dot { background: var(--green); border-color: var(--green); }
.journey__live b { width: fit-content; padding: 0.1rem 0.65rem 0.2rem; border-radius: 99em; background: var(--black); color: var(--white); }

@media (prefers-reduced-motion: no-preference) {
  .js .journey li::after { transform: scaleX(0); transition: transform 0.26s linear calc(var(--k) * 260ms + 0.3s); }
  .js .journey__dot { background: var(--off-white); border-color: var(--black); transition: background-color 0.3s, border-color 0.3s; transition-delay: calc(var(--k) * 260ms + 0.3s); }
  .js .journey.is-in li::after { transform: none; }
  .js .journey.is-in .journey__dot { background: var(--blue); border-color: var(--blue); }
  .js .journey.is-in .journey__live .journey__dot { background: var(--green); border-color: var(--green); }
}

/* ==========================================================================
   What we build — drawing sheets
   ========================================================================== */
.blds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3rem, 5.5vw, 6rem); border-top: 1px solid var(--black); border-left: 1px solid var(--border-light); }
.bld { position: relative; display: flex; flex-direction: column; padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 1.6vw, 1.5rem) clamp(1.5rem, 2.4vw, 2.25rem); border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.bld__sheet {
  aspect-ratio: 240 / 150; border-radius: 0.5rem; overflow: hidden;
  background-color: var(--white);
  background-image: linear-gradient(rgb(58 126 246 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(58 126 246 / 0.07) 1px, transparent 1px);
  background-size: 12px 12px;
  transition: translate 0.7s var(--ease-out), box-shadow 0.5s;
}
.bld__sheet svg { display: block; width: 100%; height: 100%; }
.wf { fill: none; stroke: rgb(0 0 0 / 0.42); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: fill 0.5s; }
.wf--a { stroke: var(--blue); }
.wf-t { font: 700 12px/1 var(--mono); fill: var(--blue); }
.bld__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: 0.7rem; border-top: 1px solid var(--border-light); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; }
.bld__meta span:first-child { transition: color 0.35s; }
.bld__title { margin-top: 0.9rem; font-size: clamp(1.35rem, 0.9rem + 1vw, 2rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; transition: color 0.35s, transform 0.7s var(--ease-out); }
.bld__text { max-width: 22em; margin-top: 0.55rem; font-size: 0.95rem; line-height: 1.45; color: #5e5e5e; }

.bld--ask { padding: 0; }
.bld__ask { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; height: 100%; min-height: 16rem; padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 1.6vw, 1.5rem) clamp(1.5rem, 2.4vw, 2.25rem); background: var(--black); color: var(--white); }
.bld__ask::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--purple), var(--blue)); opacity: 0; transition: opacity 0.6s var(--ease-soft); }
.bld__ask > * { position: relative; }
.bld__ask-k { font-size: clamp(1.35rem, 0.9rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.04em; }
.bld__ask-t { max-width: 18em; font-size: 0.95rem; line-height: 1.45; color: rgb(255 255 255 / 0.68); }
.bld__ask-arrow { position: absolute; top: clamp(1rem, 1.6vw, 1.5rem); right: clamp(1rem, 1.6vw, 1.5rem); display: grid; place-items: center; width: 3.25rem; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 50%; }
.bld__ask-arrow svg { width: 38%; height: 20%; rotate: -45deg; transition: rotate 0.6s var(--ease-out); }
.bld__ask:is(:hover, :focus-visible)::before { opacity: 1; }
.bld__ask:is(:hover, :focus-visible) .bld__ask-arrow svg { rotate: 0deg; }
.bld__ask:focus-visible { outline-offset: -4px; }

@media (hover: hover) {
  .bld:not(.bld--ask):hover .bld__sheet { translate: 0 -0.35rem; box-shadow: 0 1.25rem 2.5rem -1.25rem rgb(58 126 246 / 0.35); }
  .bld:hover .wf--a { fill: rgb(58 126 246 / 0.12); }
  .bld:hover .bld__meta span:first-child { color: var(--blue); }
  .bld:hover .bld__title { color: var(--blue); transform: translateX(0.4rem); }
}
@media (prefers-reduced-motion: no-preference) {
  /* lines draw in on reveal; the accent redraws on hover */
  .js .bld .wf { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-in-out) calc(var(--i, 0) * var(--stagger) + 0.25s), fill 0.5s; }
  .js .bld .wf--a { transition-delay: calc(var(--i, 0) * var(--stagger) + 0.9s), 0s; }
  .js .bld.is-in .wf { stroke-dashoffset: 0; }
  @media (hover: hover) {
    .js .bld.is-in:hover .wf--a { animation: wf-redraw 1.1s var(--ease-in-out); }
    @keyframes wf-redraw { from { stroke-dashoffset: 1; } }
  }
}

/* ==========================================================================
   Stack — editorial type, not a logo wall
   ========================================================================== */
.stk { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.stk__rows { margin-top: clamp(3rem, 5.5vw, 6rem); border-top: 1px solid rgb(255 255 255 / 0.25); }
.stk__row { position: relative; display: grid; grid-template-columns: minmax(0, 0.45fr) minmax(0, 1.9fr) minmax(0, 0.65fr); align-items: center; gap: 1rem clamp(1.5rem, 3vw, 3.5rem); padding-block: clamp(1.4rem, 2.6vw, 2.6rem); border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.stk__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--purple), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-out); }
.stk__cat { display: flex; align-items: baseline; gap: 0.9rem; font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; }
.stk__cat b { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.45); transition: color 0.35s; }
.stk__tech { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.3em; font-size: clamp(2rem, 0.8rem + 3.4vw, 5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.05em; }
.stk__tech span { color: transparent; -webkit-text-stroke: 1.2px rgb(255 255 255 / 0.45); transition: color 0.5s var(--ease-soft), -webkit-text-stroke-color 0.5s; }
.stk__tech span:nth-child(2) { transition-delay: 70ms; }
.stk__tech span:nth-child(3) { transition-delay: 140ms; }
.stk__tech span:not(:last-child)::after { content: "/"; content: "/" / ""; margin-left: 0.3em; font-weight: 300; color: rgb(255 255 255 / 0.22); -webkit-text-stroke-width: 0; }
.stk__note { max-width: 22em; font-size: 0.95rem; line-height: 1.5; color: rgb(255 255 255 / 0.6); }

@media (hover: hover) {
  .stk__row:hover::after { transform: none; }
  .stk__row:hover .stk__cat b { color: var(--blue-bright); }
  .stk__row:hover .stk__tech span { color: var(--white); -webkit-text-stroke-color: var(--white); }
  .stk__rows:hover .stk__row:not(:hover) .stk__tech span { -webkit-text-stroke-color: rgb(255 255 255 / 0.2); }
}
@media (hover: none) {
  .stk__tech span { color: var(--white); -webkit-text-stroke-color: var(--white); }
}

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

/* ==========================================================================
   Architecture — system map; a layer lights its systems and every connection
   ========================================================================== */
.smap { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.smap__grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); align-items: center; gap: 3rem clamp(2rem, 5vw, 6rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.smap__tabs { border-top: 1px solid rgb(255 255 255 / 0.2); }
.smap__tab { width: 100%; display: flex; align-items: baseline; gap: 1rem; padding-block: clamp(0.8rem, 1.4vw, 1.1rem); border-bottom: 1px solid rgb(255 255 255 / 0.1); text-align: left; color: rgb(255 255 255 / 0.42); transition: color 0.35s; }
.smap__n { min-width: 1.8rem; font: 600 var(--fs-small)/1 var(--mono); letter-spacing: 0.04em; }
.smap__name { font-size: clamp(1.5rem, 0.85rem + 1.9vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; transition: transform 0.6s var(--ease-out); }
.smap__tab:hover { color: rgb(255 255 255 / 0.8); }
.smap__tab[aria-selected="true"] { color: var(--white); }
.smap__tab[aria-selected="true"] .smap__n { color: var(--blue-bright); }
.smap__tab[aria-selected="true"] .smap__name { transform: translateX(0.6rem); }
.smap__tab:focus-visible { outline-offset: -2px; }
.smap__panels { margin-top: 1.5rem; }
.smap__panels p { max-width: 30em; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem); line-height: 1.5; color: rgb(255 255 255 / 0.72); }
.smap__rel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.smap__rel div { padding-top: 0.7rem; border-top: 1px solid rgb(255 255 255 / 0.12); }
.smap__rel dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-bright); }
.smap__rel dd { margin-top: 0.35rem; font-size: 0.9rem; line-height: 1.4; color: rgb(255 255 255 / 0.8); }

.smap__map {
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  border: 1px solid rgb(255 255 255 / 0.1); border-radius: clamp(1rem, 1.6vw, 1.5rem);
  background: #06070c radial-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1.5px) 0 0 / 22px 22px;
}
.smap__canvas { position: relative; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); aspect-ratio: 1000 / 620; container-type: inline-size; }
.smap__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.smap__e { fill: none; stroke: rgb(255 255 255 / 0.14); stroke-width: 1.4; transition: stroke 0.4s; }
.smap__band { position: relative; border-top: 1px dashed rgb(91 150 255 / 0.14); border-radius: 0.5cqi; transition: background-color 0.4s; }
.smap__band:first-of-type { border-top: 0; }
.smap__band--base { background-image: repeating-linear-gradient(-45deg, rgb(91 150 255 / 0.07) 0 1px, transparent 1px 8px); }
.smap__lbl { position: absolute; left: 1.2cqi; top: 50%; translate: 0 -50%; display: grid; gap: 0.5cqi; font-size: max(0.66rem, 1.3cqi); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); transition: color 0.4s; }
.smap__lbl b { font: 700 max(0.62rem, 1.1cqi)/1 var(--mono); color: rgb(255 255 255 / 0.3); transition: color 0.4s; }
.smap__node {
  position: absolute; left: calc(var(--x) * 1%); top: 50%; translate: -50% -50%;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.8cqi;
  width: 15.5cqi; padding: 1cqi 1.2cqi;
  border: 1px solid rgb(255 255 255 / 0.14); border-radius: 1cqi; background: #0c0d14;
  transition: border-color 0.4s, background-color 0.4s, box-shadow 0.4s, scale 0.5s var(--ease-out);
}
.smap__node i { grid-row: 1 / span 2; width: max(5px, 0.7cqi); aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / 0.25); transition: background-color 0.4s; }
.smap__node b { font-size: max(0.72rem, 1.55cqi); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smap__node small { font-size: max(0.62rem, 1.15cqi); color: rgb(255 255 255 / 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) { .smap__band { cursor: pointer; } }

/* everything not connected to the selected layer steps back */
.smap__node > * { transition: opacity 0.4s; }
.smap[data-active] .smap__node { border-color: rgb(255 255 255 / 0.07); }
.smap[data-active] .smap__node > * { opacity: 0.3; }
.smap[data-active] .smap__e { stroke: rgb(255 255 255 / 0.08); }
.smap__node:is([data-active="0"] [data-l~="0"], [data-active="1"] [data-l~="1"], [data-active="2"] [data-l~="2"], [data-active="3"] [data-l~="3"], [data-active="4"] [data-l~="4"]) { border-color: rgb(91 150 255 / 0.5); }
.smap__node:is([data-active="0"] [data-l~="0"], [data-active="1"] [data-l~="1"], [data-active="2"] [data-l~="2"], [data-active="3"] [data-l~="3"], [data-active="4"] [data-l~="4"]) > * { opacity: 1; }
.smap__node:is([data-active="0"] [data-l~="0"], [data-active="1"] [data-l~="1"], [data-active="2"] [data-l~="2"], [data-active="3"] [data-l~="3"], [data-active="4"] [data-l~="4"]) i { background: var(--green); }
.smap__e:is([data-active="0"] [data-l~="0"], [data-active="1"] [data-l~="1"], [data-active="2"] [data-l~="2"], [data-active="3"] [data-l~="3"], [data-active="4"] [data-l~="4"]) { stroke: var(--blue-bright); stroke-dasharray: 7 9; }
/* the selected layer itself */
.smap__band: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.09); }
.smap__band: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"]) .smap__lbl { color: var(--white); }
.smap__band: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"]) .smap__lbl b { color: var(--blue-bright); }
.smap__band: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"]) .smap__node { border-color: var(--blue-bright); background-color: #172556; box-shadow: 0 0 0 4px rgb(58 126 246 / 0.16), 0 1cqi 3cqi rgb(58 126 246 / 0.3); scale: 1.04; }

@media (prefers-reduced-motion: no-preference) {
  .smap__e { animation: smap-flow 0.9s linear infinite; }
  .smap.is-paused .smap__e { animation-play-state: paused; }
  @keyframes smap-flow { to { stroke-dashoffset: -16; } }
}

/* ==========================================================================
   One team — layered product screens
   sizes are in --u (1% of the canvas width) so the composition scales as one
   ========================================================================== */
.team { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 9vw, 10rem); overflow-x: clip; }
.team__head { display: grid; justify-items: center; text-align: center; }
.team__title { margin-top: 1.25rem; font-size: clamp(2.8rem, 0.6rem + 7.6vw, 9.5rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.055em; }
.team__title .mask { display: block; width: fit-content; margin-inline: auto; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.team__title .mask:first-child { color: #7a7a7a; }
.team__lead { max-width: 30em; margin-top: clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(1.05rem, 0.85rem + 0.55vw, 1.5rem); line-height: 1.4; letter-spacing: -0.02em; color: var(--gray-ink); }
.team__stage { margin-top: clamp(3.5rem, 7vw, 7rem); }
.team__canvas {
  --u: 1cqi;
  --lift: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgb(0 0 0 / 0.12), 0 0 0 1px rgb(0 0 0 / 0.05);
  position: relative; max-width: 80rem; margin-inline: auto;
  aspect-ratio: 100 / 56; container-type: inline-size;
}
.scr { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); z-index: var(--z); }
.scr--web { --x: 6; --y: 4; --w: 54; --z: 1; --depth: 0.4; }
.scr--tokens { --x: 2; --y: 31; --w: 21; --z: 2; --depth: 1.4; }
.scr--ship { --x: 74; --y: 2; --w: 24; --z: 2; --depth: 1; }
.scr--phone { --x: 60; --y: 9; --w: 16; --z: 3; --depth: 1.8; }
.scr--code { --x: 60; --y: 35; --w: 36; --z: 4; --depth: 2.4; }
.scr__float { position: relative; }
.scr__role {
  position: absolute; top: calc(-1.3 * var(--u)); right: calc(2 * var(--u));
  display: inline-flex; align-items: center; gap: calc(0.5 * var(--u));
  padding: calc(0.4 * var(--u)) calc(0.9 * var(--u)) calc(0.4 * var(--u)) calc(0.45 * var(--u));
  border-radius: 99em; background: var(--black); color: var(--white);
  font-size: max(0.62rem, calc(1.05 * var(--u))); font-weight: 600; white-space: nowrap;
}
.scr__role i { width: calc(1.3 * var(--u)); min-width: 0.6rem; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #9b7cf0, #4f6ff0); }
.scr--web .scr__role { right: auto; left: calc(8 * var(--u)); }
.scr--tokens .scr__role { top: auto; bottom: calc(-1.3 * var(--u)); }
.scr--phone .scr__role { right: calc(-4.5 * var(--u)); top: calc(12 * var(--u)); }

/* web app */
.win { overflow: hidden; border-radius: calc(1.2 * var(--u)); background: var(--white); box-shadow: var(--lift); }
.win__bar { display: flex; align-items: center; gap: calc(1.5 * var(--u)); padding: calc(0.9 * var(--u)) calc(1.2 * var(--u)); border-bottom: 1px solid rgb(0 0 0 / 0.06); background: #f6f6f6; }
.win__dots { display: inline-flex; gap: calc(0.45 * var(--u)); }
.win__dots i { width: calc(0.8 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: rgb(0 0 0 / 0.14); }
.win__url { flex: 1; max-width: calc(22 * var(--u)); margin-inline: auto; padding: calc(0.35 * var(--u)) var(--u); border-radius: 99em; background: rgb(0 0 0 / 0.05); font-size: calc(0.95 * var(--u)); text-align: center; color: rgb(0 0 0 / 0.5); }
.web { display: grid; grid-template-columns: calc(5 * var(--u)) minmax(0, 1fr); height: calc(30 * var(--u)); }
.web__side { display: grid; align-content: start; justify-items: center; gap: calc(1.3 * var(--u)); padding-top: calc(1.5 * var(--u)); border-right: 1px solid rgb(0 0 0 / 0.06); background: #fafafa; }
.web__side i { width: calc(1.8 * var(--u)); height: calc(0.5 * var(--u)); border-radius: 99em; background: rgb(0 0 0 / 0.12); }
.web__side .web__logo { width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); margin-bottom: calc(0.6 * var(--u)); border-radius: calc(0.6 * var(--u)); background: linear-gradient(135deg, var(--purple), var(--blue)); }
.web__side .is-on { background: var(--blue); }
.web__main { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: calc(1.2 * var(--u)); min-width: 0; padding: calc(1.6 * var(--u)) calc(2 * var(--u)); }
.web__top { display: flex; justify-content: space-between; align-items: center; }
.web__top b { font-size: calc(1.8 * var(--u)); font-weight: 700; letter-spacing: -0.03em; }
.web__btn { padding: calc(0.5 * var(--u)) calc(1.1 * var(--u)); border-radius: 99em; background: var(--black); color: var(--white); font-size: calc(0.95 * var(--u)); font-weight: 600; }
.web__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u); }
.web__kpis span { display: grid; gap: calc(0.3 * var(--u)); padding: calc(0.9 * var(--u)) calc(1.1 * var(--u)); border: 1px solid rgb(0 0 0 / 0.07); border-radius: calc(0.8 * var(--u)); }
.web__kpis small { font-size: calc(0.85 * var(--u)); color: rgb(0 0 0 / 0.5); }
.web__kpis b { font-size: calc(1.6 * var(--u)); font-weight: 700; letter-spacing: -0.03em; }
.web__chart { display: block; width: 100%; height: 100%; }
.web__area { fill: rgb(58 126 246 / 0.1); }
.web__line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.web__rows { display: grid; gap: calc(0.5 * var(--u)); }
.web__rows p { display: flex; align-items: center; gap: var(--u); padding-top: calc(0.5 * var(--u)); border-top: 1px solid rgb(0 0 0 / 0.06); }
.web__rows i { width: calc(1.6 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: rgb(0 0 0 / 0.08); }
.web__rows span { flex: 1; max-width: calc(16 * var(--u)); height: calc(0.55 * var(--u)); border-radius: 99em; background: rgb(0 0 0 / 0.1); }
.web__rows em { margin-left: auto; padding: calc(0.2 * var(--u)) calc(0.7 * var(--u)); border-radius: 99em; background: rgb(116 214 90 / 0.2); color: #2f7a1f; font-size: calc(0.8 * var(--u)); font-style: normal; font-weight: 600; }
.web__rows em.is-new { background: rgb(58 126 246 / 0.14); color: var(--blue); }

/* design tokens */
.tok { display: grid; gap: calc(1.1 * var(--u)); padding: calc(1.6 * var(--u)); border-radius: calc(1.2 * var(--u)); background: var(--white); box-shadow: var(--lift); }
.tok__k { font-size: calc(0.9 * var(--u)); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(0 0 0 / 0.45); }
.tok__sw { display: flex; gap: calc(0.6 * var(--u)); }
.tok__sw i { flex: 1; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.tok__type { display: flex; align-items: center; gap: calc(1.2 * var(--u)); }
.tok__type b { font-size: calc(3.6 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.tok__type span { flex: 1; display: grid; gap: calc(0.5 * var(--u)); }
.tok__type i { height: calc(0.6 * var(--u)); border-radius: 99em; background: rgb(0 0 0 / 0.12); }
.tok__type i:nth-child(2) { width: 80%; }
.tok__type i:nth-child(3) { width: 55%; }
.tok__meta { font: 500 calc(0.85 * var(--u))/1.2 var(--mono); color: rgb(0 0 0 / 0.5); }

/* pipeline */
.ship { display: grid; gap: calc(0.8 * var(--u)); padding: calc(1.4 * var(--u)); border-radius: calc(1.2 * var(--u)); background: var(--white); box-shadow: var(--lift); }
.ship__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: calc(0.4 * var(--u)); font: 600 calc(1.05 * var(--u))/1 var(--mono); }
.ship__top em { padding: calc(0.3 * var(--u)) calc(0.7 * var(--u)); border-radius: 99em; background: rgb(116 214 90 / 0.2); color: #2f7a1f; font-size: calc(0.8 * var(--u)); font-style: normal; }
.ship__step { display: flex; align-items: center; gap: calc(0.8 * var(--u)); font: 500 var(--u)/1 var(--mono); color: rgb(0 0 0 / 0.7); }
.ship__step i { position: relative; width: calc(1.3 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: var(--green); }
.ship__step small { margin-left: auto; font-size: calc(0.85 * var(--u)); color: rgb(0 0 0 / 0.4); }

/* mobile app */
.ph { position: relative; display: flex; flex-direction: column; gap: var(--u); aspect-ratio: 9 / 19; padding: calc(3.2 * var(--u)) calc(1.3 * var(--u)) calc(1.4 * var(--u)); border: calc(0.6 * var(--u)) solid var(--black); border-radius: calc(2.6 * var(--u)); background: var(--white); box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) rgb(0 0 0 / 0.22); }
.ph__notch { position: absolute; top: calc(0.8 * var(--u)); left: 50%; translate: -50% 0; width: calc(4.5 * var(--u)); height: calc(1.1 * var(--u)); border-radius: 99em; background: var(--black); }
.ph__h { font-size: calc(1.5 * var(--u)); font-weight: 700; letter-spacing: -0.03em; }
.ph__card { display: flex; align-items: center; gap: calc(0.8 * var(--u)); padding: calc(0.8 * var(--u)); border-radius: calc(0.9 * var(--u)); background: #f3f3f3; }
.ph__img { flex: none; width: calc(3.4 * var(--u)); aspect-ratio: 1; border-radius: calc(0.6 * var(--u)); background: linear-gradient(135deg, #f1c27d, #e07a5f); }
.ph__card span { display: grid; gap: calc(0.2 * var(--u)); min-width: 0; }
.ph__card b { font-size: var(--u); font-weight: 600; white-space: nowrap; }
.ph__card small { font-size: calc(0.8 * var(--u)); color: rgb(0 0 0 / 0.5); white-space: nowrap; }
.ph__steps { display: grid; gap: calc(0.9 * var(--u)); margin-top: calc(0.4 * var(--u)); padding-left: calc(1.6 * var(--u)); }
.ph__steps span { position: relative; font-size: calc(0.95 * var(--u)); color: rgb(0 0 0 / 0.4); }
.ph__steps span::before { content: ""; position: absolute; left: calc(-1.6 * var(--u)); top: 50%; translate: 0 -50%; width: calc(0.8 * var(--u)); aspect-ratio: 1; border: 1.5px solid rgb(0 0 0 / 0.25); border-radius: 50%; }
.ph__steps .is-done { font-weight: 600; color: var(--black); }
.ph__steps .is-done::before { border-color: var(--blue); background: var(--blue); }
.ph__btn { margin-top: auto; padding: calc(0.9 * var(--u)); border-radius: 99em; background: linear-gradient(135deg, #7a45e0, #3f6ff2); color: var(--white); font-size: var(--u); font-weight: 600; text-align: center; }

/* API code */
.code { overflow: hidden; border-radius: calc(1.2 * var(--u)); background: #0d0e14; color: var(--white); box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) rgb(0 0 0 / 0.25); }
.code__top { display: flex; align-items: center; gap: calc(1.2 * var(--u)); padding: calc(0.9 * var(--u)) calc(1.3 * var(--u)); border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 500 calc(0.9 * var(--u))/1 var(--mono); color: rgb(255 255 255 / 0.5); }
.code .win__dots i { background: rgb(255 255 255 / 0.18); }
.code__body { margin: 0; padding: calc(1.3 * var(--u)) calc(1.6 * var(--u)); overflow: hidden; font: 500 calc(1.1 * var(--u))/1.6 var(--mono); white-space: pre; color: rgb(255 255 255 / 0.7); }
.c-m { font-weight: 700; color: #b79cff; }
.c-s { font-weight: 700; color: var(--green); }
.c-k { color: #6fd3f0; }
.c-v { color: #e8c07a; }

@media (prefers-reduced-motion: no-preference) {
  .scr__float { animation: team-float 8s ease-in-out infinite alternate; animation-delay: calc(var(--depth) * -1.7s); }
  .team.is-paused .scr__float { animation-play-state: paused; }
  @keyframes team-float { from { translate: 0 calc(var(--depth) * 0.35 * var(--u)); } to { translate: 0 calc(var(--depth) * -0.35 * var(--u)); } }
  /* screens drift apart by depth as the section scrolls through */
  @supports (animation-timeline: view()) and (animation-range: entry) {
    .team__stage { view-timeline: --team; }
    .scr { animation: team-drift linear both; animation-timeline: --team; animation-range: cover; }
    @keyframes team-drift { from { translate: 0 calc(var(--depth) * 2.5 * var(--u)); } to { translate: 0 calc(var(--depth) * -2.5 * var(--u)); } }
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64em) {
  .bp__node, .bp__svc, .bp__route { padding: 0.45rem 0.6rem; font-size: 0.78rem; }
  .bp__route { font-size: 0.7rem; }

  .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .journey li:nth-child(3n)::before, .journey li:nth-child(3n)::after { display: none; }

  .blds { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stk__row { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .stk__note { max-width: 34em; }

  .smap__grid { grid-template-columns: minmax(0, 1fr); }

}

@media (max-width: 48em) {
  /* one-team stage: fewer, larger screens */
  .team__canvas { --u: 1.55cqi; aspect-ratio: 1 / 0.97; }
  .scr--web { --x: 0; --y: 2; --w: 58; }
  .scr--phone { --x: 45; --y: 22; }
  .scr--code { --x: 1; --y: 40; --w: 40; }
  .scr--tokens, .scr--ship { display: none; }

  .bp { --lvl-w: 100%; }
  .bp__rev { display: none; }
  .bp__shafts { display: none; }
  .bp__body::after { display: none; }
  .bp__floor { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .bp__lvl { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.95rem; }
  .bp__items { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: stretch; gap: 0.45rem; translate: none; }
  .bp__node, .bp__svc, .bp__route { min-width: 0; overflow: hidden; }
  .bp__pipe { grid-column: 1 / -1; justify-self: start; }

  .smap__rel { grid-template-columns: minmax(0, 1fr); }
  .smap__canvas { display: block; aspect-ratio: auto; container-type: normal; }
  .smap__edges { display: none; }
  .smap__band { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.85rem 0.6rem; border-radius: 0.6rem; }
  .smap__lbl { position: static; translate: none; display: flex; gap: 0.5rem; width: 100%; margin-bottom: 0.2rem; font-size: 0.7rem; }
  .smap__lbl b { font-size: 0.7rem; }
  .smap__node { position: static; translate: none; width: auto; column-gap: 0.5rem; padding: 0.45rem 0.65rem; border-radius: 0.6rem; }
  .smap__node b { font-size: 0.8rem; }
  .smap__node small { font-size: 0.68rem; }
  .smap__band: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"]) .smap__node { box-shadow: 0 0 0 3px rgb(58 126 246 / 0.16); scale: none; }
}

@media (max-width: 40em) {
  .blds { grid-template-columns: minmax(0, 1fr); }
  .bld { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-content: start; column-gap: 1rem; padding-block: 1.25rem; }
  .bld__sheet { grid-row: 1 / span 3; align-self: start; }
  .bld__meta { margin-top: 0; padding-top: 0; border-top: 0; }
  .bld__title { margin-top: 0.45rem; }
  .bld__ask { min-height: 10rem; }

  .journey { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .journey li { grid-template-columns: 0.9rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.2rem; padding: 0 0 1.4rem; }
  .journey__dot { grid-row: 1 / span 2; margin: 0.35rem 0 0; }
  .journey li:nth-child(3n)::before, .journey li:nth-child(3n)::after { display: block; }
  .journey li:not(:last-child)::before,
  .journey li:not(:last-child)::after { left: 0.45rem; right: auto; top: 0.8rem; bottom: -0.35rem; width: 1px; height: auto; }
  .journey li:not(:last-child)::after { width: 2px; margin: 0 0 0 -0.5px; transform-origin: 50% 0; }
  .journey li:last-child::before, .journey li:last-child::after { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .js .journey li::after { transform: scaleY(0); }
  }
}