/* =========================================================
UltraSapiens Architecture Layer — 500M Final
========================================================= */

.architecture-page--final {
  position: relative;
  overflow-x: clip;
}

.architecture-page--final::before,
.architecture-page--final::after {
  content: "";
  position: absolute;
  pointer-events: none;
  filter: blur(100px);
  opacity: 0.48;
  z-index: 0;
}

.architecture-page--final::before {
  top: -140px;
  left: -180px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(93, 169, 255, 0.12) 0%, transparent 72%);
}

.architecture-page--final::after {
  top: 240px;
  right: -150px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(46, 211, 198, 0.11) 0%, transparent 72%);
}

.architecture-main {
  position: relative;
  z-index: 1;
}

/* HERO */

.architecture-hero {
  padding-top: 132px;
  padding-bottom: 84px;
}

.architecture-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px);
  gap: 30px;
  align-items: start;
}

.architecture-hero__label,
.architecture-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--accent-primary);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.architecture-hero__label::before,
.architecture-section__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: rgba(46, 211, 198, 0.68);
}

.architecture-hero__designation {
  margin-bottom: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.architecture-hero__title {
  margin: 0;
  max-width: 12ch;
  font-family: "Space Grotesk", var(--font-main);
  font-size: clamp(3.2rem, 7vw, 5.2rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
  font-weight: 600;
}

.architecture-hero__intro {
  max-width: 760px;
  margin-top: 22px;
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  line-height: 1.68;
  color: var(--text-secondary);
}

.architecture-hero__intro--secondary {
  color: var(--text-muted);
}

.architecture-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.architecture-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.architecture-hero__signals span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.2;
}

.architecture-hero__panel {
  padding: 24px 22px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top right, rgba(46,211,198,0.06), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    var(--bg-secondary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 18px 42px rgba(0,0,0,0.22);
}

.architecture-hero__panel-label {
  margin-bottom: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.architecture-hero__panel-item + .architecture-hero__panel-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.architecture-hero__panel-item strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text-primary);
}

.architecture-hero__panel-item span {
  display: block;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.62;
}

/* BAND */

.architecture-band {
  padding: 0 0 20px;
}

.architecture-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.architecture-band__item {
  min-height: 128px;
  padding: 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.016)),
    var(--bg-secondary);
}

.architecture-band__item strong {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--text-primary);
}

.architecture-band__item span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* SECTIONS */

.architecture-section {
  padding-top: 108px;
  padding-bottom: 108px;
}

.architecture-section--tight {
  padding-top: 72px;
  padding-bottom: 82px;
}

.architecture-section__lead {
  max-width: 820px;
  margin-bottom: 34px;
}

.architecture-section__lead--wide {
  max-width: 940px;
}

/* PRINCIPLES */

.architecture-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.architecture-principle {
  min-height: 148px;
  padding: 22px 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.065);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.016)),
    var(--bg-secondary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
}

.architecture-principle strong {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.architecture-principle span {
  display: block;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-secondary);
}

/* MAP */

.architecture-map__caption {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.architecture-map {
  position: relative;
  min-height: 760px;
  margin-top: 34px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.014)),
    var(--bg-secondary);
  background-size: 100% 14.28%, 8.33% 100%, auto, auto;
  overflow: hidden;
}

.architecture-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 24%, rgba(46,211,198,0.08), transparent 28%),
    radial-gradient(circle at 78% 22%, rgba(93,169,255,0.08), transparent 28%),
    radial-gradient(circle at 50% 78%, rgba(255,255,255,0.04), transparent 26%);
  pointer-events: none;
}

.architecture-map__node {
  position: absolute;
  width: 260px;
  padding: 22px 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.075);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.016)),
    rgba(17,22,28,0.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.018),
    0 12px 28px rgba(0,0,0,0.18);
  z-index: 2;
}

.architecture-map__node h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.architecture-map__node p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-secondary);
}

.architecture-map__node--primary {
  border-color: rgba(46,211,198,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 18px 34px rgba(0,0,0,0.24);
}

.architecture-map__node--1 { top: 78px; left: 64px; }
.architecture-map__node--2 { top: 214px; left: 370px; }
.architecture-map__node--3 { top: 72px; right: 64px; }
.architecture-map__node--4 { top: 470px; left: 78px; }
.architecture-map__node--5 { top: 496px; left: 390px; }
.architecture-map__node--6 { top: 454px; right: 82px; }

.architecture-map__line {
  position: absolute;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.05)
  );
  z-index: 1;
}

.architecture-map__line--1 { top: 252px; left: 274px; width: 166px; transform: rotate(8deg); }
.architecture-map__line--2 { top: 238px; left: 626px; width: 154px; transform: rotate(-12deg); }
.architecture-map__line--3 { top: 520px; left: 238px; width: 194px; transform: rotate(6deg); }
.architecture-map__line--4 { top: 552px; left: 636px; width: 150px; transform: rotate(-8deg); }

.architecture-map__line--5 {
  top: 366px;
  left: 514px;
  width: 1px;
  height: 122px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.05)
  );
  transform: none;
}

/* GRID CONTENT */

.architecture-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

.architecture-grid__content {
  min-width: 0;
}

.architecture-panel {
  padding: 26px 24px 22px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.065);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.016)),
    var(--bg-secondary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
}

.architecture-panel__head {
  margin-bottom: 18px;
}

.architecture-panel__head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.architecture-panel__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.68;
  color: var(--text-secondary);
}

/* SUMMARY */

.architecture-summary {
  max-width: 920px;
  padding: 36px 36px 32px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top right, rgba(46,211,198,0.05), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.016)),
    var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.architecture-summary::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(93,169,255,0.08), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.architecture-summary__actions {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* RESPONSIVE */

@media (max-width: 1180px) {
  .architecture-hero__grid {
    grid-template-columns: 1fr;
  }

  .architecture-band__grid,
  .architecture-principles {
    grid-template-columns: 1fr 1fr;
  }

  .architecture-map {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
  }

  .architecture-map__node,
  .architecture-map__line {
    position: static;
    width: auto;
    transform: none;
  }

  .architecture-map__line {
    display: none;
  }
}

@media (max-width: 920px) {
  .architecture-band__grid,
  .architecture-principles,
  .architecture-grid,
  .architecture-map {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .architecture-hero {
    padding-top: 110px;
    padding-bottom: 72px;
  }

  .architecture-hero__title {
    max-width: none;
  }

  .architecture-section {
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .architecture-section--tight {
    padding-top: 64px;
    padding-bottom: 68px;
  }

  .architecture-summary {
    padding: 28px 22px 24px;
    border-radius: 20px;
  }
}

@media (max-width: 560px) {
  .architecture-hero__actions,
  .architecture-summary__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .architecture-hero__signals {
    display: grid;
    grid-template-columns: 1fr;
  }
}