.architecture { padding: 1rem; background: #0f171f; border: 1px solid var(--line-dark); border-radius: var(--radius-lg); }
.architecture__tabs { display: flex; flex-wrap: wrap; gap: .35rem; padding: .4rem; margin-bottom: 1rem; background: rgba(255,255,255,.035); border-radius: 10px; }
.architecture__tab { flex: 1; min-width: 85px; padding: .65rem .7rem; background: transparent; color: #7f8e9c; border: 0; border-radius: 7px; font: .62rem/1 var(--font-mono); text-transform: uppercase; cursor: pointer; }
.architecture__tab:hover, .architecture__tab.is-active { background: #1d2a36; color: var(--signal); }
.architecture__canvas { position: relative; min-height: 470px; overflow: hidden; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 20px 20px; border-radius: 12px; }
.architecture__canvas::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,31,.95), transparent 35%, transparent 65%, rgba(15,23,31,.95)); pointer-events: none; }
.arch-node { position: absolute; z-index: 2; display: grid; place-content: center; min-width: 105px; min-height: 56px; padding: .6rem; background: #16232e; color: #a4b0bb; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; font: .65rem/1.35 var(--font-mono); text-align: center; transition: .25s ease; }
.arch-node.is-active { color: var(--white); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(51,214,177,.08), 0 10px 30px rgba(0,0,0,.3); }
.arch-node[data-node="edge"] { top: 8%; left: 50%; transform: translateX(-50%); }
.arch-node[data-node="app"] { top: 31%; left: 50%; transform: translateX(-50%); }
.arch-node[data-node="compute"] { top: 54%; left: 33%; transform: translateX(-50%); }
.arch-node[data-node="events"] { top: 54%; left: 67%; transform: translateX(-50%); }
.arch-node[data-node="data"] { top: 78%; left: 33%; transform: translateX(-50%); }
.arch-node[data-node="workers"] { top: 78%; left: 67%; transform: translateX(-50%); }
.arch-side { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; padding: .65rem .8rem; color: #8493a1; border-left: 2px solid var(--blue); font: .58rem/1.5 var(--font-mono); }
.arch-side--right { left: auto; right: 1rem; border-left-color: var(--warning); }
.arch-line { position: absolute; z-index: 1; width: 2px; background: #334554; transform-origin: top; transition: background-color .2s ease, box-shadow .2s ease; }
.arch-line.is-active { background: var(--signal); box-shadow: 0 0 12px rgba(51,214,177,.6); }
.arch-line--1 { top: 20%; left: 50%; height: 12%; }
.arch-line--2 { top: 43%; left: 50%; height: 13%; transform: rotate(47deg); }
.arch-line--3 { top: 43%; left: 50%; height: 13%; transform: rotate(-47deg); }
.arch-line--4 { top: 65%; left: 33%; height: 14%; }
.arch-line--5 { top: 65%; left: 67%; height: 14%; }

.data-pipeline { display: grid; gap: .9rem; }
.pipeline-stage { position: relative; display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: center; min-height: 88px; padding: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.pipeline-stage:not(:last-child)::after { content: "↓"; position: absolute; z-index: 2; bottom: -1.4rem; left: 4.7rem; color: var(--signal-dark); font-family: var(--font-mono); }
.pipeline-stage__label { color: var(--muted); font: .65rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pipeline-nodes { display: flex; flex-wrap: wrap; gap: .45rem; }
.pipeline-node { position: relative; overflow: hidden; flex: 1; min-width: 90px; padding: .65rem; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; font-size: .72rem; text-align: center; }
.pipeline-node::before { content: ""; position: absolute; top: 0; left: -35%; width: 30%; height: 2px; background: var(--signal-dark); animation: pipeline-pulse 4s linear infinite; }
.pipeline-stage:nth-child(2) .pipeline-node::before { animation-delay: .7s; }
.pipeline-stage:nth-child(3) .pipeline-node::before { animation-delay: 1.4s; }
.pipeline-stage:nth-child(4) .pipeline-node::before { animation-delay: 2.1s; }
.pipeline-stage:nth-child(5) .pipeline-node::before { animation-delay: 2.8s; }
@keyframes pipeline-pulse { to { left: 110%; } }

@media (max-width: 600px) {
  .architecture__canvas { min-height: 620px; }
  .arch-node[data-node] { left: 50%; transform: translateX(-50%); }
  .arch-node[data-node="edge"] { top: 4%; }
  .arch-node[data-node="app"] { top: 20%; }
  .arch-node[data-node="compute"] { top: 36%; }
  .arch-node[data-node="events"] { top: 52%; }
  .arch-node[data-node="data"] { top: 68%; }
  .arch-node[data-node="workers"] { top: 84%; }
  .arch-line { display: none; }
  .arch-side { display: none; }
  .pipeline-stage { grid-template-columns: 1fr; }
  .pipeline-stage:not(:last-child)::after { left: 50%; }
}