.micro-hero .hero-copy h1 {
  max-width: 780px;
  font-size: clamp(3.2rem, 5.5vw, 5.4rem);
  overflow-wrap: normal;
}

.micro-hero .hero-copy h1 span {
  color: var(--cyan);
}

.micro-graphic {
  background:
    radial-gradient(circle at 50% 44%, rgba(99, 214, 198, 0.14), transparent 35%),
    radial-gradient(circle at 70% 64%, rgba(212, 182, 111, 0.11), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%),
    rgba(12, 16, 23, 0.8);
}

.micro-graphic .activation-glow {
  fill: url(#microGlow);
  animation: microGlow 5.8s ease-in-out infinite;
}

.micro-graphic .activation-orbit {
  fill: none;
  stroke: rgba(99, 214, 198, 0.38);
  stroke-dasharray: 6 12;
  stroke-width: 1.5;
  transform-origin: center;
  animation: microOrbit 13s linear infinite;
}

.micro-graphic .activation-orbit--b {
  stroke: rgba(212, 182, 111, 0.4);
  animation-direction: reverse;
  animation-duration: 10s;
}

.micro-graphic .activation-orbit--c {
  stroke: rgba(106, 143, 220, 0.42);
  animation-duration: 15s;
}

.micro-graphic .activation-core {
  fill: rgba(99, 214, 198, 0.09);
  stroke: rgba(99, 214, 198, 0.7);
  stroke-width: 1.6;
  animation: coreDistort 6.4s ease-in-out infinite;
}

.micro-graphic text {
  fill: rgba(236, 232, 220, 0.74);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-anchor: middle;
}

.layer-stack rect {
  fill: rgba(9, 13, 18, 0.78);
  stroke: rgba(214, 199, 150, 0.36);
  stroke-width: 1.3;
}

.layer-stack path {
  fill: none;
  stroke: url(#microLine);
  stroke-dasharray: 9 14;
  stroke-linecap: round;
  stroke-width: 2;
  opacity: 0.72;
  animation: microFlow 6.8s linear infinite;
}

.layer-stack path:nth-of-type(2) {
  animation-duration: 5.6s;
}

.layer-stack path:nth-of-type(3) {
  animation-duration: 7.4s;
  animation-direction: reverse;
}

.layer-stack path:nth-of-type(4) {
  animation-duration: 8.2s;
}

.micro-nodes circle {
  fill: var(--gold);
  filter: drop-shadow(0 0 12px rgba(212, 182, 111, 0.62));
  opacity: 0.7;
  animation: nodePulse 3.5s ease-in-out infinite;
}

.micro-nodes circle:nth-child(2) {
  animation-delay: -0.45s;
}

.micro-nodes circle:nth-child(3) {
  animation-delay: -0.9s;
}

.micro-nodes circle:nth-child(4) {
  animation-delay: -1.35s;
}

.micro-nodes circle:nth-child(5) {
  animation-delay: -1.8s;
}

.micro-nodes circle:nth-child(6) {
  animation-delay: -2.25s;
}

.context-horizon {
  fill: none;
  stroke: rgba(212, 182, 111, 0.74);
  stroke-dasharray: 4 10;
  stroke-linecap: round;
  stroke-width: 2;
  animation: microFlow 7.2s linear infinite;
}

.micro-graphic .caption {
  fill: rgba(170, 164, 146, 0.78);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-anchor: start;
}

.micro-content .opening-note {
  color: rgba(236, 232, 220, 0.88);
}

.micro-content a {
  color: var(--gold);
  text-decoration-color: rgba(212, 182, 111, 0.38);
  text-underline-offset: 0.18em;
}

.micro-content a:hover,
.micro-content a:focus-visible {
  color: var(--cyan);
  outline: none;
}

.micro-negative,
.geology-map,
.micro-walls,
.agency-contrast,
.threshold-grid {
  display: grid;
  gap: 1px;
  margin: 2rem 0;
  border: 1px solid rgba(214, 199, 150, 0.16);
  background: rgba(214, 199, 150, 0.14);
}

.micro-negative {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.geology-map {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.micro-walls {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

.micro-negative section,
.geology-map section,
.micro-walls section,
.agency-contrast section,
.threshold-grid section,
.companion-block {
  background:
    linear-gradient(180deg, rgba(99, 214, 198, 0.045), transparent 54%),
    rgba(13, 16, 22, 0.8);
}

.micro-negative section,
.geology-map section,
.micro-walls section,
.agency-contrast section,
.threshold-grid section {
  padding: 1rem;
}

.micro-negative span,
.geology-map span,
.micro-walls span,
.agency-contrast span,
.threshold-grid span {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--cyan);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.micro-negative h3,
.geology-map h3,
.micro-walls h3 {
  margin: 0 0 0.65rem;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
}

.micro-negative p,
.geology-map p,
.micro-walls p,
.agency-contrast p,
.threshold-grid p,
.companion-block p {
  color: rgba(236, 232, 220, 0.78);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.94rem;
  line-height: 1.62;
}

.micro-negative p,
.geology-map p,
.micro-walls p,
.agency-contrast p,
.threshold-grid p {
  margin-bottom: 0;
}

.agency-contrast section:first-child {
  border-left: 3px solid rgba(212, 182, 111, 0.72);
}

.agency-contrast section:last-child {
  border-left: 3px solid rgba(99, 214, 198, 0.68);
}

.companion-block {
  margin: 2.2rem 0 0;
  border: 1px solid rgba(99, 214, 198, 0.18);
  padding: 1.2rem 1.3rem;
}

.companion-block p:last-child {
  margin-bottom: 0;
  color: var(--gold);
}

.related-primary {
  background:
    radial-gradient(circle at 82% 18%, rgba(99, 214, 198, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(212, 182, 111, 0.08), transparent 44%),
    rgba(13, 16, 22, 0.66);
}

.related-primary span {
  color: var(--gold);
}

@keyframes microFlow {
  to {
    stroke-dashoffset: -46;
  }
}

@keyframes microOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes microGlow {
  50% {
    opacity: 0.52;
    transform: scale(1.06);
  }
}

@keyframes coreDistort {
  50% {
    opacity: 0.78;
    transform: scale(1.025);
  }
}

@keyframes nodePulse {
  50% {
    opacity: 0.32;
    transform: scale(1.35);
  }
}

@media (max-width: 980px) {
  .micro-negative,
  .geology-map,
  .micro-walls,
  .threshold-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .micro-hero .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(2rem, 10.5vw, 2.6rem);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .micro-negative,
  .geology-map,
  .micro-walls,
  .agency-contrast,
  .threshold-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .micro-hero .hero-copy h1 {
    font-size: clamp(1.85rem, 9.8vw, 2.25rem);
  }
}