#principal.scroll-logo-active {
  position: relative;
  isolation: isolate;
}
.scroll-logo-active > :not(.scroll-logo-stage) {
  position: relative;
  z-index: 1;
}
.scroll-logo-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}
.scroll-logo-stage.scroll-logo-foreground { z-index: 2; }
.scroll-logo {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform-origin: 0 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 15px 25px #0d67ff18);
}
.scroll-logo-active .hero-symbol .logo-letter { visibility: hidden; }
.scroll-logo-active .solution-card {
  background: linear-gradient(155deg, #121721d9, #0c0f16e0 55%);
}
.diagram-core .diagram-core-letter {
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
.logo-approaching .diagram-core-letter { visibility: hidden; }
.about-visual {
  transition: border-color .5s ease, box-shadow .5s ease;
}
.diagram-core, .diagram-ring, .diagram-node {
  transition: border-color .5s ease, box-shadow .5s ease, color .5s ease, background-color .5s ease;
}
.about-visual.logo-docked {
  border-color: #499ab9;
  box-shadow: 0 0 35px #13cbe315, inset 0 0 60px #7464ff0c;
}
.logo-docked .diagram-core {
  border-color: #76eaff;
  background: radial-gradient(circle at 25% 15%, #164c68, #242045 70%, #342047);
  box-shadow: 0 0 24px #21d9f345, 0 0 56px #b94ce733, inset 0 0 22px #6ba7ff24;
}
.logo-docked .diagram-ring { border-color: #3393b5; box-shadow: 0 0 20px #33bded12; }
.logo-docked .diagram-ring.inner { border-color: #b473d6; }
.logo-docked .diagram-node { border-color: #566aa2; color: #e0eaff; }
.logo-docked .node-top, .logo-docked .node-left { border-color: #36b9d7; color: #91f0ff; }
.logo-docked .node-right, .logo-docked .node-bottom { border-color: #b36ad6; color: #efb8ff; }
.scroll-logo.is-docked { filter: drop-shadow(0 0 5px #41daff99) drop-shadow(0 0 9px #d640d866); }
.logo-docked .diagram-core::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid #88eaff;
  border-radius: 50%;
  pointer-events: none;
  animation: logo-dock-pulse 1.1s ease-out both;
}
@keyframes logo-dock-pulse {
  from { transform: scale(.94); opacity: .8; }
  to { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-logo { will-change: auto; }
}

/* Natural scrolling drives a held desktop scene, with a readable vertical
   sequence on small or short screens. No wheel/touch events are intercepted. */
#processo.process-scroll-active { padding-block: 0; }
.process-scroll-active .process-sticky { padding-block: 42px 64px; }
#processo.process-pinned { height: calc(var(--process-content) + var(--process-travel)); }
.process-pinned .process-sticky { position: sticky; top: var(--process-top); }
.process-scroll-active .steps > article { opacity: var(--step-reveal, 0); }
.process-scroll-active .steps h3,
.process-scroll-active .steps p { transform: translateY(calc((1 - var(--step-reveal, 0)) * 18px)); }
.process-scroll-active .step-number > span {
  display: flex;
  width: 38px;
  height: 36px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}
.process-scroll-active .step-active .step-number { color: #74dff5; border-color: #54bdd0; }
.process-scroll-active .step-active h3 { color: #d3f7ff; }
.process-scroll-active .step-complete .step-number { color: #869fbb; border-color: #38516d; }
.process-scroll-active:not(.process-pinned) .steps { grid-template-columns: 1fr; gap: 64px; }
.process-scroll-active:not(.process-pinned) .steps > article { min-height: 220px; }

.faq-visual {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 640 / 460;
  margin: 30px auto 0;
  pointer-events: none;
  user-select: none;
  background: radial-gradient(ellipse, #174f811a, transparent 68%);
}
.faq-symbol { display: block; width: 100%; height: 100%; overflow: visible; }
.faq-symbol .logo-letter { filter: drop-shadow(0 3px 5px #159af844); }
.scroll-logo-active .faq-visual:not(.faq-docked) .faq-symbol { visibility: hidden; }
/* Particle visibility is toggled inline for depth, so also hide their group
   while the traveling V is still outside the FAQ destination. */
.scroll-logo-active .faq-visual:not(.faq-docked) .faq-orbit-parts { opacity: 0; }