.architecture { padding-bottom: 40px; }
.architecture-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; }
.architecture-heading h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.08; letter-spacing: -.04em; margin: 17px 0 0; }
.architecture-heading p { max-width: 420px; color: var(--muted); margin: 0 0 5px; }
.architecture-map { border: 1px solid #2a4037; background: radial-gradient(circle at 50% 0, rgba(108,229,177,.08), transparent 36%), #09130f; box-shadow: 0 30px 80px rgba(0,0,0,.25); padding: 28px; }
.control-lane { border: 1px solid #2b493d; background: linear-gradient(110deg, rgba(108,229,177,.055), rgba(108,229,177,.012)); padding: 18px 22px; }
.lane-title, .data-label, .architecture-foot { display: flex; align-items: center; justify-content: space-between; }
.lane-title span, .data-label span { font: 700 10px ui-monospace, monospace; letter-spacing: .15em; color: var(--green); }
.lane-title small, .data-label small { color: #718078; font-size: 10px; }
.control-flow { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 18px; }
.arch-node { display: flex; align-items: center; gap: 12px; min-width: 190px; padding: 12px; border: 1px solid #2b4037; background: #0a1511; }
.arch-node.active { min-width: 250px; border-color: #477260; }
.node-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #3b5d4f; color: var(--green); font: 700 9px ui-monospace, monospace; }
.arch-node strong, .arch-stage strong { display: block; font-size: 12px; }
.arch-node small, .arch-stage small { display: block; color: #708078; font-size: 9px; margin-top: 2px; }
.arch-arrow { font-style: normal; color: var(--green); }
.arch-arrow.split { letter-spacing: 5px; }
.site-pills { display: flex; gap: 6px; }
.site-pills span { border: 1px solid #324a40; padding: 8px 10px; font: 8px ui-monospace, monospace; color: #899990; }
.data-label { padding: 27px 2px 14px; }
.data-flow { display: grid; grid-template-columns: 1fr 35px 1fr 35px 1fr 35px 1fr 35px 1fr; align-items: stretch; }
.arch-stage { position: relative; min-height: 170px; border: 1px solid #273b32; padding: 22px 15px 16px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(150deg, rgba(255,255,255,.025), transparent); }
.arch-stage:hover { border-color: #477260; }
.stage-number { position: absolute; top: 10px; right: 11px; color: #52625b; font: 8px ui-monospace, monospace; }
.stage-icon { font-size: 29px; color: var(--green); margin: auto 0; }
.stage-icon.waves { font-size: 40px; }
.source-icons { display: flex; gap: 6px; margin: auto 0; }
.source-icons i { font-style: normal; width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #477260; color: var(--green); font: 8px ui-monospace, monospace; }
.flow-arrow { display: flex; align-items: center; color: var(--green); font-style: normal; }
.flow-arrow span { height: 1px; background: #426354; flex: 1; }
.architecture-foot { margin-top: 18px; color: #718078; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.architecture-foot span { margin-right: 20px; }
.architecture-foot span:nth-child(2) { flex: 1; }
.architecture-foot i { display: inline-block; width: 8px; height: 8px; border: 1px solid #5a7469; margin-right: 5px; }
.architecture-foot span:nth-child(2) i { background: var(--green); border-color: var(--green); }
.architecture-foot strong { color: #91a29a; font-weight: 500; }
@media (max-width: 900px) {
  .architecture-heading { display: block; }
  .architecture-heading p { margin-top: 25px; }
  .control-flow { flex-wrap: wrap; }
  .arch-arrow.split { display: none; }
  .site-pills { width: 100%; justify-content: center; }
  .data-flow { grid-template-columns: 1fr 20px 1fr; }
  .data-flow .flow-arrow:nth-of-type(3) { display: none; }
}
@media (max-width: 620px) {
  .architecture-map, .control-lane { padding: 14px; }
  .control-flow { display: grid; grid-template-columns: 1fr 18px 1fr; }
  .arch-node, .arch-node.active { min-width: 0; }
  .arch-node div { display: none; }
  .site-pills { grid-column: 1 / -1; }
  .lane-title small, .data-label small { display: none; }
  .data-flow { display: block; }
  .arch-stage { min-height: 120px; }
  .flow-arrow { height: 28px; justify-content: center; transform: rotate(90deg); }
  .flow-arrow span { max-width: 20px; }
  .architecture-foot strong { display: none; }
}