.stack {
    padding: 100px 5%;
}

.stack-inner { max-width: 1280px; margin: 0 auto; }

.stack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.stack-category h3 {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.02em;
}

.stack-category h3::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

.stack-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-light);
}

.stack-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    transition: color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}

.stack-item:hover {
    color: var(--text-primary);
    padding-left: 6px;
}

.stack-item .stack-status {
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.stack-item .stack-status.active { color: var(--accent); }

@media (max-width: 768px) {
    .stack { padding: 70px 5%; }
    .stack-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}