/* === One-Pager Section === */
#noirstack-onepager {
  padding: 4rem 2rem;
  max-width: 960px;
  margin: 0 auto;
  background-color: var(--dark-bg);
  color: var(--color-text-muted);
  animation: slideFadeIn 1.5s ease-out forwards;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#noirstack-onepager h1,
#noirstack-onepager h2 {
  color: var(--electric-blue);
  margin-bottom: var(--space-md);
  font-family: var(--font-primary);
}

#noirstack-onepager p,
#noirstack-onepager ul,
#noirstack-onepager li {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

#noirstack-onepager ul {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-lg);
}

#noirstack-onepager section {
  margin-bottom: 3rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--color-surface);
  transition: border-color 0.3s;
  animation: slideFadeIn 1s ease-out forwards;
}

#noirstack-onepager code,
#noirstack-onepager pre {
  background: var(--code-bg);
  color: var(--electric-blue);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  overflow-x: auto;
  display: block;
}

#noirstack-onepager a {
  color: var(--electric-blue);
  text-decoration: underline;
}
#noirstack-onepager a:hover {
  color: var(--highlight);
}

/* === Responsive One-Pager === */
@media (max-width: 768px) {
  #noirstack-onepager {
    padding: 2rem 1rem;
  }
  #noirstack-onepager section {
    padding-left: 1rem;
  }
}

/* === Entrance Animation === */
@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}