:root {
  --arch-bg: #080d0f;
  --arch-bg-deep: #05090b;
  --arch-ink: #f4f1e8;
  --arch-subtext: rgba(244, 241, 232, 0.72);
  --arch-muted: rgba(244, 241, 232, 0.46);
  --arch-line: rgba(244, 241, 232, 0.15);
  --arch-gold: #e9bd62;
  --arch-gold-bright: #ffe1a0;
  --arch-gold-dim: rgba(233, 189, 98, 0.22);
  --arch-blue: #8ab9ca;
  --arch-purple: #b7a4e8;
  --arch-radius: 18px;
  --arch-ease: cubic-bezier(0.16, 0.78, 0.22, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--arch-bg);
  color: var(--arch-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.55;
}

button, a { font: inherit; }

a { color: inherit; text-decoration: none; }

button { color: inherit; }

.architecture-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--arch-bg);
}

.architecture-page::before,
.architecture-page::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
}

.architecture-page::before {
  z-index: -2;
  background: url("assets/images/product/architecture-panorama.png") center top / cover no-repeat;
  opacity: 0.62;
  transform: scale(1.02);
}

.architecture-page::after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(5, 9, 11, 0.82), rgba(5, 9, 11, 0.48) 52%, rgba(5, 9, 11, 0.74));
}

.architecture-page > * {
  position: relative;
  z-index: 1;
}

.architecture-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.4rem;
  padding: 0.7rem clamp(1.1rem, 4vw, 4.8rem);
  border-bottom: 1px solid rgba(244, 241, 232, 0.1);
  background: rgba(5, 9, 11, 0.68);
  backdrop-filter: blur(18px);
}

.architecture-brand { display: inline-flex; align-items: center; gap: 0.72rem; min-width: max-content; }
.architecture-brand__mark { position: relative; display: inline-grid; width: 2.25rem; height: 2.25rem; place-items: center; overflow: hidden; border-radius: 50%; }
.architecture-brand__mark img { position: absolute; width: 5rem; max-width: none; }
.architecture-brand__mark img:first-child { opacity: 0.92; }
.architecture-brand__mark img:last-child { width: 4.1rem; }
.architecture-brand b { display: block; font-size: 0.95rem; letter-spacing: 0.08em; }
.architecture-brand small { display: block; color: var(--arch-muted); font-size: 0.61rem; letter-spacing: 0.12em; text-transform: uppercase; }
.architecture-nav { display: flex; gap: clamp(0.8rem, 3vw, 2.4rem); color: var(--arch-subtext); font-size: 0.73rem; letter-spacing: 0.08em; }
.architecture-nav a { transition: color 180ms ease; }
.architecture-nav a:hover, .architecture-nav a:focus-visible { color: var(--arch-gold-bright); }
.architecture-version { color: var(--arch-muted); font-size: 0.62rem; letter-spacing: 0.16em; white-space: nowrap; }

.architecture-hero {
  position: relative;
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  max-width: none;
  min-height: min(55rem, 78vh);
  margin: 0 auto;
  padding: clamp(5rem, 11vw, 10rem) clamp(1.1rem, 8vw, 8rem) clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid rgba(244, 241, 232, 0.12);
  background: rgba(5, 9, 11, 0.12);
  backdrop-filter: blur(1px);
}

.architecture-hero__copy { max-width: 55rem; }
.eyebrow { margin: 0 0 1.2rem; color: var(--arch-gold); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.architecture-hero h1 { max-width: 53rem; margin: 0; font-size: clamp(2.4rem, 5.8vw, 5.8rem); font-weight: 350; letter-spacing: -0.065em; line-height: 1.04; }
.architecture-hero h1 span, .section-heading h2 span, .architecture-landing h2 span { color: var(--arch-gold-bright); }
.architecture-hero__lede { max-width: 42rem; margin: 2rem 0 0; color: var(--arch-subtext); font-size: clamp(0.9rem, 1.5vw, 1.1rem); }
.architecture-hero__tags { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 2rem; }
.architecture-hero__tags span { padding: 0.46rem 0.7rem; border: 1px solid rgba(233, 189, 98, 0.3); border-radius: 999px; color: var(--arch-gold-bright); font-size: 0.7rem; }
.architecture-hero__meta { align-self: flex-end; display: grid; gap: 0.25rem; min-width: 7rem; color: var(--arch-muted); text-align: right; }
.architecture-hero__meta span { color: var(--arch-gold); font-size: 3.4rem; font-weight: 250; letter-spacing: -0.08em; line-height: 0.9; }
.architecture-hero__meta small { font-size: 0.65rem; letter-spacing: 0.12em; }

.architecture-map-shell, .architecture-loop, .architecture-landing { max-width: 1440px; margin: 0 auto; padding: clamp(4.5rem, 8vw, 8rem) clamp(1.1rem, 6vw, 6rem); background: rgba(5, 9, 11, 0.44); backdrop-filter: blur(12px); }
.architecture-map-shell { border-top: 1px solid var(--arch-line); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 4.3vw, 4.6rem); font-weight: 330; letter-spacing: -0.055em; line-height: 1.04; }
.section-heading > p { max-width: 24rem; margin: 0 0 0.2rem; color: var(--arch-subtext); font-size: 0.86rem; }
.section-heading--center { display: block; max-width: 48rem; margin-inline: auto; text-align: center; }
.section-heading--center > p { max-width: 38rem; margin: 1.1rem auto 0; }

.system-map { position: relative; overflow: hidden; padding: clamp(1.3rem, 3vw, 2.5rem); border: 1px solid rgba(244, 241, 232, 0.16); border-radius: 2rem; background: rgba(5, 9, 11, 0.34); box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.16); backdrop-filter: blur(10px) saturate(0.86); }
.system-map::before { content: ""; position: absolute; inset: 14% 13%; border: 1px solid rgba(233, 189, 98, 0.08); border-radius: 50%; pointer-events: none; }
.map-lane { position: relative; z-index: 1; padding: 1.5rem 0; }
.map-lane + .map-lane { border-top: 1px solid rgba(244, 241, 232, 0.08); }
.lane-label { display: grid; grid-template-columns: 2rem auto; align-items: baseline; column-gap: 0.45rem; width: max-content; margin-bottom: 1.15rem; }
.lane-label span { grid-row: span 2; color: var(--arch-gold); font-size: 1.35rem; font-weight: 280; }
.lane-label b { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; }
.lane-label small { color: var(--arch-muted); font-size: 0.66rem; }
.map-nodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.map-node { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 4.65rem; padding: 0.75rem 0.85rem; border: 1px solid rgba(244, 241, 232, 0.16); border-radius: var(--arch-radius); background: rgba(8, 13, 15, 0.38); text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); transition: border-color 220ms ease, background 220ms ease, transform 360ms var(--arch-ease), box-shadow 220ms ease; }
.map-node:hover, .map-node:focus-visible, .map-node.is-active { z-index: 2; border-color: var(--arch-gold-bright); background: rgba(233, 189, 98, 0.11); box-shadow: 0 0 0 1px rgba(233, 189, 98, 0.2), 0 0 2.5rem rgba(233, 189, 98, 0.08); transform: translateY(-3px); outline: none; }
.node-icon { flex: 0 0 2.3rem; display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid rgba(233, 189, 98, 0.3); border-radius: 0.75rem; color: var(--arch-gold-bright); font-size: 1.05rem; }
.node-icon img { width: 1.18rem; height: 1.18rem; opacity: 0.95; }
.map-node b { display: block; font-size: 0.79rem; font-weight: 650; line-height: 1.25; }
.map-node small { display: block; margin-top: 0.24rem; color: var(--arch-muted); font-size: 0.63rem; line-height: 1.25; }
.map-node--factory, .map-node--evidence, .map-node--agent { border-color: rgba(233, 189, 98, 0.28); }
.map-node--harness { border-color: rgba(138, 185, 202, 0.28); }
.map-node--harness .node-icon { border-color: rgba(138, 185, 202, 0.5); color: var(--arch-blue); }

.map-connector { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; height: 3.1rem; color: var(--arch-gold); }
.map-connector::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--arch-gold), transparent); opacity: 0.7; }
.map-connector span { position: relative; padding: 0.28rem 0.65rem; border: 1px solid rgba(233, 189, 98, 0.26); border-radius: 999px; background: var(--arch-bg-deep); color: var(--arch-gold-bright); font-size: 0.62rem; letter-spacing: 0.08em; }

.cognitive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; padding-right: 17rem; }
.cognitive-core { position: absolute; top: 50%; right: 1.4rem; display: grid; width: 14.4rem; height: 14.4rem; place-content: center; gap: 0.25rem; border: 1px solid var(--arch-gold); border-radius: 50%; background: rgba(8, 13, 15, 0.28); text-align: center; cursor: pointer; box-shadow: inset 0 0 2.5rem rgba(233, 189, 98, 0.06); backdrop-filter: blur(4px); transform: translateY(-50%); transition: box-shadow 280ms ease, transform 420ms var(--arch-ease); }
.cognitive-core:hover, .cognitive-core:focus-visible, .cognitive-core.is-active { box-shadow: 0 0 0 1px var(--arch-gold), 0 0 3rem rgba(233, 189, 98, 0.24); outline: none; transform: translateY(-50%) scale(1.025); }
.core-orbit { position: absolute; inset: -0.9rem; border: 1px solid rgba(233, 189, 98, 0.22); border-radius: 50%; pointer-events: none; }
.core-orbit--inner { inset: 1.1rem; border-color: rgba(255, 225, 160, 0.18); }
.core-icon { color: var(--arch-gold-bright); font-size: 1.8rem; }
.cognitive-core b { font-size: 1.3rem; letter-spacing: 0.1em; }
.cognitive-core strong { font-size: 0.78rem; font-weight: 600; }
.cognitive-core small { max-width: 8.5rem; margin: 0.15rem auto 0; color: var(--arch-subtext); font-size: 0.61rem; line-height: 1.35; }

.capability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.runtime-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.harness-boundary { margin: 1rem 0 0; padding: 0.75rem 1rem; border-left: 1px solid var(--arch-blue); color: var(--arch-subtext); font-size: 0.7rem; }
.map-governance { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(244, 241, 232, 0.1); }
.map-governance span { display: grid; gap: 0.18rem; padding: 0.7rem; border: 1px solid rgba(244, 241, 232, 0.1); border-radius: 0.8rem; background: rgba(255, 255, 255, 0.018); }
.map-governance b { color: var(--arch-gold-bright); font-size: 0.67rem; }
.map-governance small { color: var(--arch-muted); font-size: 0.58rem; line-height: 1.3; }

.architecture-detail-panel { display: grid; gap: 0.5rem; max-width: 48rem; min-height: 9.5rem; margin: 1rem auto 0; padding: 1.4rem 1.6rem; border-left: 1px solid var(--arch-gold); background: rgba(233, 189, 98, 0.07); backdrop-filter: blur(8px); }
.detail-panel__index { color: var(--arch-gold); font-size: 0.63rem; letter-spacing: 0.15em; }
.architecture-detail-panel h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.architecture-detail-panel p { max-width: 40rem; margin: 0; color: var(--arch-subtext); font-size: 0.8rem; }

.architecture-loop { border-top: 1px solid var(--arch-line); }
.loop-track { display: flex; align-items: center; justify-content: center; gap: clamp(0.45rem, 1.5vw, 1.4rem); margin-top: 3rem; }
.loop-track > i { color: var(--arch-gold); font-style: normal; font-size: 1.35rem; }
.loop-step { display: grid; gap: 0.25rem; min-width: 8.5rem; padding: 1.1rem; border: 1px solid rgba(244, 241, 232, 0.14); border-radius: 1rem; background: rgba(8, 13, 15, 0.42); backdrop-filter: blur(10px); }
.loop-step span { color: var(--arch-gold); font-size: 0.68rem; }
.loop-step b { font-size: 0.88rem; }
.loop-step small { color: var(--arch-muted); font-size: 0.62rem; line-height: 1.3; }
.loop-step--gold { border-color: var(--arch-gold); background: rgba(233, 189, 98, 0.1); }

.architecture-landing { border-top: 1px solid var(--arch-line); }
.architecture-landing h2 { margin: 0; font-size: clamp(2rem, 4vw, 4.2rem); font-weight: 330; letter-spacing: -0.05em; line-height: 1.06; }
.landing-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin-top: 3rem; }
.landing-columns article { min-height: 11rem; padding: 1.15rem; border-top: 1px solid var(--arch-gold); background: rgba(8, 13, 15, 0.42); backdrop-filter: blur(10px); }
.landing-columns span { color: var(--arch-gold); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; }
.landing-columns b { display: block; margin-top: 1.1rem; font-size: 1rem; }
.landing-columns p { margin: 0.6rem 0 0; color: var(--arch-subtext); font-size: 0.76rem; }

.architecture-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem clamp(1.1rem, 6vw, 6rem); border-top: 1px solid var(--arch-line); color: var(--arch-muted); font-size: 0.64rem; letter-spacing: 0.08em; }
.architecture-footer a { color: var(--arch-gold); }

@media (max-width: 1000px) {
  .architecture-nav { display: none; }
  .map-nodes, .capability-grid, .runtime-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cognitive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 0; }
  .cognitive-core { position: relative; top: auto; right: auto; width: 12rem; height: 12rem; margin: 1.5rem auto 0; transform: none; }
  .cognitive-core:hover, .cognitive-core:focus-visible, .cognitive-core.is-active { transform: scale(1.025); }
  .map-governance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loop-track { flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .architecture-topbar { min-height: 3.8rem; }
  .architecture-version { display: none; }
  .architecture-page::before { background-position: 50% top; opacity: 0.46; }
  .architecture-page::after { background: rgba(5, 9, 11, 0.78); }
  .architecture-hero { min-height: 34rem; padding-top: 4rem; }
  .architecture-hero__meta { display: none; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 1.2rem; }
  .map-nodes, .cognitive-grid, .capability-grid, .runtime-grid, .map-governance, .landing-columns { grid-template-columns: 1fr; }
  .map-node { min-height: 4rem; }
  .map-governance span { min-height: 4.2rem; }
  .loop-track { display: grid; grid-template-columns: 1fr; }
  .loop-track > i { justify-self: center; transform: rotate(90deg); }
  .loop-step { min-width: 0; }
  .architecture-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}